关于CSS3的animation动画效果

最新推荐文章于 2024-04-16 22:03:31 发布

原创最新推荐文章于 2024-04-16 22:03:31 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用CSS3的@keyframes规则创建动画效果，并通过示例详细解释了animation属性的各种参数，包括duration、delay、iteration-count等。

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

CSS3的动画效果是用@keyframes 规则来创建的,在@keyframes中写入要改变的css样式,就可以创建一个渐变过程的动画效果.

以下为一个例子:

.addsucc-tips {
    animation: change-tip 2s;    //change-tip是需要做动画效果的css名称
    -webkit-animation: change-tip 2s;
    -moz-animation: change-tip 2s;
    -o-animation: change-tip 2s; 
}

@keyframes change-tip {    //这里的change-tip是动画的名称,要和animation上的名称一致.里面的内容是动画的关键帧改变效果
    0% {opacity: 0.75}
    25% {opacity: 1}
    50% {opacity: 0.5}
    75% {opacity: 0.25}
    100% {opacity: 0}
}

@-webkit-keyframes change-tip {
    0% {opacity: 0.75}
    25% {opacity: 1}
    50% {opacity: 0.5}
    75% {opacity: 0.25}
    100% {opacity: 0}
}

在@keyframes里面除了用百分比来描述关键帧改变外,还可以使用from..to..,比如

@keyframes css-name {  
    from {color: #fff}
    to {color: #000}
}

from..to..适合变化比较少的情况下,如果是多变的,用百分比比较好.

animation还有如下属性对动画进行控制:

animation-duration: 2s;//一次播放动画的时间
nimation-delay: 0s;//延迟多久开始播放动画
animation-iteration-count: 1;//动画播放多少次（infinite代表无限循环）animation-direction: normal; //是否循环交替反向播放动画animation-timing-function: linear; //设置动画如何完成一个周期的动画

tips:animate.css官网利用@keyframes封装了很多动态样式.