一、transition 过渡

 

　　过渡效果一般由浏览器直接改变元素的CSS属性实现，从一种状态过渡到另一种状态。

 

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

 

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

 

　　第二、声明过渡元素最终状态样式，比如悬浮状态；

 

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

 

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

 

　　transition: 2s 3s all linear; (过渡时间 延迟时间 属性 速度)

 

　　下面的表格列出了所有的转换属性：

 

　　1.transition-property

 

　　2.transition-duration

 

　　3.transition-timing-function

 

　　4.transition-delay

 

　　实例：

 

　　在一个例子中使用所有过渡属性：

 

　　二、animation 动画

 

　　CSS3 @keyframes 规则

 

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

 

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

 

　　1、什么是 CSS3 中的动画？

 

　　动画是使元素从一种样式逐渐变化为另一种样式的效果。

 

　　您可以改变任意多的样式任意多的次数。

 

　　请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

 

　　0% 是动画的开始，100% 是动画的完成。

 

　　为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

 

　　2、CSS3 动画属性

 

　　animation: 自定义名字 持续时间 动画类型 延迟时间 次数;