一, 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: 自定义名字 持续时间 动画类型 延迟时间 次数;
下面的表格列出了 @keyframes 规则和所有动画属性:
实例:
改变背景色和位置:
运行名为 myfirst 的动画, 其中设置了所有动画属性:
来源: http://www.jianshu.com/p/3a4591390542