web前端入门到实战：css过渡和动画解析文.docxVIP

第

第PAGE1页共NUMPAGES1页

web前端入门到实战：css过渡和动画解析文

一、transition过渡

过渡效果普通由扫瞄器挺直转变元素的CSS属性实现，从一种状态过渡到另一种状态。

在CSS中创建容易的过渡效果可以从以下几个步骤来实现：

第一、在默认样式中声明元素的初始状态样式；

其次、声明过渡元素终于状态样式，比如悬浮状态；

第三、在默认样式中通过添加过渡函数，添加一些不同的样式。

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

transition:2s3salllinear;(过渡时光延迟时光属性速度)

下面的表格列出了全部的转换属性：

1.transition-property

2.transition-duration

3.transition-timing-function

4.transition-delay

实例：

在一个例子中用法全部过渡属性：

二、animation动画

CSS3@keyframes规章

如需在CSS3中创建动画，您需要学习@keyframes规章。

在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

1、什么是CSS3中的动画？

动画是使元素从一种样式逐渐变幻为另一种