CSS3过渡跟动画解析
导读：CSS3过渡跟动画 这两者的区别，很简单， 过渡就是字面上意思，比如，宽度从1px，慢慢增加到10px，这便是一种过渡； 动画，也是字面上意思，不过跟过渡最大的区别就是最终的状态，不管执行了什么动画，最终的状态会还原，比如说宽度从1p...
CSS3过渡跟动画
这两者的区别，很简单，
过渡就是字面上意思，比如，宽度从1px，慢慢增加到10px，这便是一种过渡；
动画，也是字面上意思，不过跟过渡最大的区别就是最终的状态，不管执行了什么动画，最终的状态会还原，比如说宽度从1px，慢慢增加到10px，动画结束后，会还原到1px。
举几个例子，举一反三即可。
1、过渡属性：
transition: width 1s linear 2s;
// 等价于
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
实例（鼠标悬浮在div上，3秒后，宽度从150px，2秒的时间均匀增长到400px，然后停止）
div {
width: 150px;
height: 100px;
background: blue;
transition: width 1s linear 3s;
}
div:hover {
width: 400px;
}
2、动画属性
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
// 动画循环次数，永久
animation-direction: alternate;
// 动画一个周期结束后，倒序播放，正常是 normal
animation-play-state: running;
// 等价于
animation: myfirst 5s linear 2s infinite alternate;
// 动画名称的两种写法
@keyframes myName1 {
from {
background: red;
}
to {
background: yellow;
}
}
@keyframes myName2 {
0% {
background: red;
}
50% {
background: green;
}
100% {
background: blue;
}
}
实例（div的背景颜色从红色->
绿色->
蓝色，蓝色->
绿色->
红色，无限循环）
div
{
animation: myfirst2 5s linear 2s infinite alternate;
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS3过渡跟动画解析
本文地址： https://pptw.com/jishu/655725.html