2021-04-29

CSS3过渡和动画

 

为了添加某种效果可以从一个样式转变到另一个的时候，无需使用flash动画或JavaScript，只需要鼠标移动到上面就可以。

 

 

 

我们要实现这样的效果，必须规定两项内容：

 

指定要添加效果的CSS属性和效果的持续时间

 

 

 

所有的过渡属性：

 

transition：简写属性，用于在一个属性中设置四个过渡属性

 

transition-property：规定应用过渡的CSS属性的名称

 

transition-duration：定义过渡效果花费的时间，默认是0

 

transition-timing-function：规定过渡效果的时间曲线，默认是‘ease‘

 

transition-delay：规定过渡时间何时开始，默认是0

 

 

 

div {

 

transition-property: width;

 

transition-duration: 1s;

 

transition-timing-function: linear;

 

transition-delay: 2s;

 

}//等价于div{ transition: width 1s linear 2s; }

 

CSS3动画

创建动画，可以取代许多网页动画图像，Flash动画和JavaScript.

 

 

 

CSS3@keyframes规则

 

该规则是创建动画。@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

 

 

 

当@keyframes创建动画时，把它绑定到一个选择器，否则不会有任何效果。

 

指定至少两个CSS3的动画属性绑定向一个选择器：规定动画的名称和动画的时长。

 

div {

 

width: 100px;

 

height: 100px;

 

background: red;

 

animation: myfirst 5s;

 

}

 

@keyframes myfirst {

 

from { background: red;}

 

to { backgroung: yellow;}

 

}

 

 

 

我们可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%。0%是动画的开始，100%是动画的完成。

 

 

 

所有的动画属性：