CSS中transition与animation的功能与不同

1.transition过渡

transition属性用于指定元素从一个状态到另一个状态时的过渡效果,在给定的时间内平滑而自然地改变属性值。

css 复制代码
transition: property duration timing-function delay;
  • property: 指定应用过渡效果的CSS属性名称。可以使用all来指定所有可动画的属性。
  • duration: 过渡效果的持续时间,例如 1s 或 500ms。
  • timing-function: 过渡效果的速度曲线,常用的是linear、ease、ease-in、ease-out 和 ease-in-out。
  • delay: 过渡效果开始前的延迟时间,例如 1s。
css 复制代码
button {
    background-color: aquamarine;
    transition: background-color 0.5s ease;    
}
button:hover {
    background-color:aqua;
}
/* 所有属性过渡 */
.all-properties {
    transition: all 0.5s ease 2s;
}

2.animation动画

animation允许通过关键帧来定义动画,可以实现更为复杂和连续的动画效果。

css 复制代码
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  • name:@keyframes 名称。
  • duration: 过渡效果的持续时间。
  • time-function: 动画的速度曲线。常用的是ease、linear、ease-in、ease-out、ease-in-out。
  • delay: 动画效果开始前的延迟时间,例如 1s。
  • iteration-count: 设置 infinite 动画将永远持续下去或设置自然数字。
  • direction: 指定向前播放、向后播放还是交替播放动画。常用的是normal、reverse、alternate、alternate-reverse。
  • fill-mode: 在不播放动画时的样式(在开始之前,结束之后,或两者都结束时),默认值是none。常用的是none、forwards、backwards、both。
  • play-state:规定动画是运行还是暂停。默认值是running。常用的是running、paused。
css 复制代码
/* 定义关键帧 */ 
@keyframes expand {
    0% { transform: scale(1); }
    100% { transform: scale(1.5); }
}

/* 应用动画 */
.animated-box {
    width: 300px;
    line-height: 30px;
    background-color: rgb(0, 255, 145);
    animation: expand 2s ease-in-out 1s infinite alternate;
}

3.不同之处

  • 目的:transition 主要用于处理元素状态的过渡,animation用于创建更为复杂和连续的动画效果。
  • 使用场景:transition适用于简单的显示/隐藏动画,animation适用于需要精确控制的复杂动画序列。
  • 控制程度:animation提供了更多的动画控制选项,如动画的播放状态、速度曲线等。
相关推荐
earthzhang20213 天前
《深入浅出HTTPS》读书笔记(31):HTTPS和TLS/SSL
开发语言·网络·python·https·1024程序员节
不讲废话的小白5 天前
怎么样把pdf转成图片模式(不能复制文字)
pdf·1024程序员节
明明真系叻5 天前
2025.1.26机器学习笔记:C-RNN-GAN文献阅读
人工智能·笔记·深度学习·机器学习·生成对抗网络·1024程序员节
Joeysoda10 天前
Java数据结构 (从0构建链表(LinkedList))
java·linux·开发语言·数据结构·windows·链表·1024程序员节
清风-云烟12 天前
使用redis-cli命令实现redis crud操作
java·linux·数据库·redis·spring·缓存·1024程序员节
Joeysoda12 天前
Java数据结构 (链表反转(LinkedList----Leetcode206))
java·linux·开发语言·数据结构·链表·1024程序员节
比特在路上12 天前
StackOrQueueOJ3:用栈实现队列
c语言·开发语言·数据结构·1024程序员节
0xCC说逆向14 天前
Windows图形界面(GUI)-QT-C/C++ - Qt键盘与鼠标事件处理详解
c语言·开发语言·c++·windows·qt·win32·1024程序员节
明明真系叻15 天前
2025.1.18机器学习笔记:PINN文献精读
人工智能·笔记·深度学习·机器学习·1024程序员节
0xCC说逆向16 天前
Windows图形界面(GUI)-QT-C/C++ - Qt List Widget详解与应用
c语言·开发语言·c++·windows·qt·win32·1024程序员节