css3过渡和动画

标签：

一、CSS3过渡：（浏览器要加前缀，一般要配合hover使用，transition）
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
1、要实现过渡，必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上 。
规定效果的时长（以秒为单位） 。
2、transition-property 属性
规定应用过渡效果的 CSS 属性的名称,有height、width等。
3、transition-duration 属性
规定完成过渡效果需要花费的时间（以秒或毫秒计）。
4、transition-timing-function 属性
规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。默认值：ease(规定慢速开始，然后变快，然后慢速结束的过渡效果)
linear:规定以相同速度开始至结束的过渡效果
5、transition-delay 属性
规定过渡效果何时开始。transition-delay 值以秒或毫秒计。默认值为0.

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
简写div
{
transition: width 1s linear 2s;
}
二、CSS3动画 （animation、@keyframes，浏览器加前缀，可加偏移效果）
1、CSS3 @keyframes 规则：
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
2、当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称。
规定动画的时长 。
3、把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
4、时间
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
5、animation-duration 属性
定义动画完成一个周期所需要的时间，以秒或毫秒计。
6、animation-timing-function 规定动画的速度曲线。同CSS3过渡
7、animation-delay 属性定义动画何时开始。同CSS3过渡
8、animation-iteration-count 属性定义动画的播放次数。n/infinite(无限次播放）

css3过渡和动画

标签：

原文地址：http://www.cnblogs.com/durunci/p/5936584.html