animation 循环_强大的CSS动画：Transition与Animation

最新推荐文章于 2024-04-25 16:16:15 发布

weixin_39806065

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量2.4k

点赞数 1

本文总结CSS3中两个用来做动画的属性，一个是transition，另一个是animation。

差异比较

CSS3差异transition在给定的持续时间内平滑地更改属性值(从一个值到另一个值)，也就是只需要指定开始与结束的参数，参数改变时就触发动画。常用语鼠标事件(:hover、active、:focus、:click)或键盘输入时触发需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发。只能定义开始状态和结束状态，不能定义中间状态。animation可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧(@keyframe)的参数。网页加载时会直接执行，可以自行控制各阶段动画的变化

animation和transition最大的不同在于transition是当参数改变时触发，而animation则是直接就执行，所有动画效果需要明确的指定关键帧的参数。

CSS3简写顺序transitionproperty名称timing-function特效animationname名称timing-function特效iteration-count次数fill-mode填充模式

浏览器支持

transition写法

.box { width: 100px; height: 100px; background-color: purple; transition: width 2s ease-in 2s;}.box:hover { width: 200px; height: 200px; background-color: red;}

animation写法

.box { width: 100px; height: 100px; border: 1px solid #ccc; animation: change 5s; /*8个属性中至少要有名称、时间*/}/*设定开始与结束状态*//*from 就是0%，to 就是100%*/@keyframes change { from { background-color: #4BC0C8; } to { background-color: #C779D0; }}.box { width: 100px; height: 100px; border: 1px solid #ccc; animation: change 5s; /*8个属性中至少要有名称、时间*/}/*设定开始与结束状态*//*from 就是0%，to 就是100%*/@keyframes change { 0% { background-color: #4BC0C8; } 20% { background-color: #C779D0; } 60% { background-color: #FEAC5E; } 80% { background-color: #185a9d; } 100% { background-color: #4BC0C8; }}

属性值animation-name@keyframes后的名称animation-duration时间time以秒计算，如3s initial预设值inherit继承父层animation-timing-function特效linear等速、ease、ease-in、ease-out、ease-in-out、step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)可上官网取值使用animation-delay以秒计算，如2sanimation-iteration-count次数number预设值为1，因此填2时，动画跑的次数为1+2=3次infinite无限循环animation-direction方向normal、reverse反向、alternate先反后正animation-fill-modeforwards使用关键帧最后的值backwards使用最开始的值bothanimation-play-state播放状态pause暂停running为预设值initial预设值、inherit继承父层

Animation.css