animation 属性
程序员文章站
2022-02-13 20:08:13
...
animation 属性是一个简写属性,用于设置六个过渡属性:
animation-duration animation-timing-function
animation-delay (这三个应该能猜出来吧,同上)
animation-name(绑定的 keyframe 名称)
animation-iteration-count(播放次数。 次数(n) | infinite无限)
animation-direction(是否播放反向动画。normal | alternate)
p{
animation:pMove 1s infinite;
-moz-animation:pMove 1s infinite; /* Firefox */
-webkit-animation:pMove 1s infinite; /* Safari and Chrome */
-o-animation:pMove 5s infinite; /* Opera */
}
@keyframes pMove{
/*设置不同时段的动画*/
0% { color: yellow; transform: scale(1); }
25% { color: white; transform: scale(1.1); }
50% { color: yellow; transform: scale(1); }
75% { color: white; transform: scale(1.1); }
100% { color: yellow; transform: scale(1); }
}
@-moz-keyframes pMove /* Firefox */{ /*同上,只是为了兼容*/}
@-webkit-keyframes pMove /* Safari and Chrome */{ /*同上,只是为了兼容*/}
@-o-keyframes pMove /* Opera */{ /*同上,只是为了兼容*/}
下一篇: AnimationBlending