CSS3中animation和transition有什么区别-创新互联
这篇文章给大家分享的是有关CSS3中animation和transition有什么区别的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
10年积累的网站设计制作、
成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先
网站制作后付款的网站建设流程，更有
沧县免费网站建设让你可以放心的选择与我们合作。
CSS3动画和JS动画的区别
JS 实现的是帧动画
CSS3 实现的是补间动画
transition
transition是一个简单的动画属性，可以看作是是animation的简化版本，通常拿来配合事件触发使用，简单易用
transition的属性值
| 描述 | 属性 |
|---|
| transition-property | 需要过渡的属性，也可以是all，不能用block，none等 |
| transition-duration | 指定从一个属性到另一个属性过渡所要花费的时间。默认值为0，为0时，表示变化是瞬时的，看不到过渡效果 |
| transiton-timing-function | 就是过渡的动画类型。可用的类型有liner（匀速）、ease-in(减速)、ease-out（加速）ease-in-out（先加速再减速）、cubic-bezier：三次贝塞尔曲线，可以定制 |
| transition-delay | 指定检测到过渡行为之后延迟一定时间后才开始进行执行 |
transition特性
transition需用事件触发【比如加个hover伪类】，不能在网页加载时自动发生
一次性，不能重复发生，除非一再触发
只有两个状态：开始和结束状态
一条transition规则只能定义一个属性
效果如下
也可以在 hover中写transition: width 1s 0.5s ease-in-out
.box:hover {
width: 200px;
transition: width 1s 0.5s ease-in-out;
}
其实写在hover上也是可以的，但是当我移出元素后，元素宽度立马恢复，而没有过渡！
原因很简单，你transistion只写在hover上，也就是说只有鼠标移上去的时候，该伪类才生效
animation
animation的属性值
| 属性 | 描述 |
|---|
| animation-name | 用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0 |
| animation-timing-function | 速度曲线，和transition-timing-function一样，可用的类型有liner（匀速）、ease-in(减速)、ease-out（加速）ease-in-out（先加速再减速）、cubic-bezier：三次贝塞尔曲线，可以定制 |
| animation-delay | 规定动画何时开始，默认是 0 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1 |
| animation-direction | normal 默认值，如果设置为normal时，动画每次循环都是向前（即按顺序）播放，alternate（轮流），动画播放在第偶数次向前播放，第奇数次向反方向播放（animation-iteration-count取值大于1时设置有效） |
| animation-play-state | running，可以通过该值将暂停的动画重新播放，这里的重新播放不是从元素动画的开始播放，而是从暂停的那个位置开始播放，paused，暂停播放 |
| animation-fill-mode | 默认情况下，动画结束后，元素的样式将回到起始状态，animation-fill-mode属性可以控制动画结束后元素的样式。主要具有四个属性值：none（默认，回到动画没开始时的状态。），forwards（动画结束后动画停留在结束状态），backwords（动画回到第一帧的状态），both（根据animation-direction轮流应用forwards和backwards规则） |
感谢各位的阅读！关于“CSS3中animation和transition有什么区别”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
