过渡（transition）

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• CSS属性
• 效果持续时间。

div
{
	width:100px;
	height:100px;
	background:#00EEEE;
	transition:width 2s;
}

div:hover
{
	width:300px;
}

过渡

多项改变

要添加多个样式的变换效果，添加的属性由逗号分隔：

div {
    width: 100px;
    height: 100px;
    background: red;
	opacity:0.8;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg);
}

css3

过渡属性

属性	描述
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;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}
简写 ：transition: width 1s linear 2s;

动画

css动画有一些列图片连续播放所构成，实现一个复杂的动画往往需要把它拆解成一个个图片然后合成到最后的结果

@keyframes

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

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

指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称
• 规定动画的时长

CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

@keyframes mymove
{
	0%   {top:0px;}
	25%  {top:200px;}
	50%  {top:100px;}
	75%  {top:200px;}
	100% {top:0px;}
}
@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}

动画暂停

animation-play-state 属性规定动画正在运行还是暂停。animation-play-state: paused|running; paused 规定动画已暂停。running 规定动画正在播放。

.rotation-paused {
  animation-play-state: paused;
}