CSS3中的动画功能之transtions和animations详解

最新推荐文章于 2024-01-12 20:50:59 发布

北方的刀郎

最新推荐文章于 2024-01-12 20:50:59 发布

阅读量2.3k

点赞数

分类专栏： html div css

本文链接：https://blog.csdn.net/forest_fire/article/details/50944610

版权

html div css 专栏收录该内容

123 篇文章 3 订阅

订阅专栏

CSS3中的动画功能之transtions和animations详解

Transitions和Animations功能，这两种功能都可以通过改变CSS中的属性值来产生动画效果。

一.Transitions

语法：transitions: property duration timing-function

property: 表示对哪个属性进行平滑过渡(可设置为all，则所有属性值变化时均产生动画效果)
duration: 表示在多长时间内完成属性值的平滑过渡
timing-function: 表示通过什么方法来进行平滑过渡（具体值下面详细介绍）

样例代码：

transitions: background-color 1s linear;

可同时设置多个属性值：

样例代码：

transitions: background-color 1s linear, color 1s linear, width 1s linear;

可同时设置所有属性值：

样例代码:

transitions: all 1s linear;

二 .Animations

语法：animations: name duration timing-function iteration-count;

name: 关键帧集合名（通过此名创建关键帧的集合，见下面样例代码）
duration: 表示在多长时间内完成属性值的平滑过渡
timing-function: 表示通过什么方法来进行平滑过渡（具体值下面详细介绍）
iteration-count: 迭代循环次数，可设置为具体数值，或者设置为infinite进行无限循环，默认为1

样例代码：

.box {
    background-color: red;
    -webkit-animation: mycolor 4s linear infinite;
 }
 @-webkit-keyframes mycolor {
     0% {
        background-color: red;
     }
     40% {
         background-color: darkblue;
     }
     70% {
        background-color: yellow;
     }
     100% {
        background-color: green;
     }
 }