CSS@keyframes使用方法

yu_sheng_

于 2017-09-07 16:22:16 发布

阅读量7.4k

点赞数 4

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/yushengphper/article/details/77883172

版权

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用@keyframes创建CSS动画效果，包括动画的基本语法、关键帧设置等，并通过一个旋转动画实例展示了如何将动画应用到元素上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@keyframes就是个动画，可以理解成多个transform组成的一个组。

@keyframes 动画名 {
from{
你的css
}
to{
你的css
}
}

调用这个动画的时候用animation
animation由六个属性组成

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
所以按顺序写就行了。
animation : 动画名时间速度曲线开始的时候延迟播放次数轮流反向播放
来个例子：

.aaa {
    -webkit-animation: gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear; 
}
@keyframes gif {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

P.S from就是0% to就是100%。