css3中animation 属性

最新推荐文章于 2024-04-14 16:02:40 发布

原创最新推荐文章于 2024-04-14 16:02:40 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

animation: name duration timing-function delay iteration-count direction;

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name：规定需要绑定到选择器的 keyframe 名称。(默认值为none)
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。(默认值为0)
animation-timing-function：规定动画的速度曲线。(默认值为ease)
animation-delay：规定在动画开始之前的延迟。(默认值为0)
animation-iteration-count：规定动画应该播放的次数。(默认值为1)
animation-direction：规定是否应该轮流反向播放动画。(默认值为normal)

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

div{
    width: 300px;
    height: 100px;
    background-color: pink;
    animation-name: test1,test2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes test2{
    0%{background-color: blue;}
    30%{background-color: green;}
    60%{background-color: gray;}
    100%{background-color: black;}
}