CSS3的过渡和动画

 

在css3中可以实现很多一些动态效果，css3逐步取代了Flash，可以通过他带来的新特性帮助我们轻易解决一些问题，例如图片的圆角可以直接使用border-radius就可以解决，无需再使用ps解决，并且css3可以减少开发和维护成本，并且还能提高页面性能，因为一些动态效果我们不需要再去使用JS就可以完成

 

过渡：transition

过渡是什么？

我的理解是，当一个元素通过某个条件触发时（例如：hover）改变成另一个属性的过程，更通俗一点来说就是一个人起床到下床，总不会直接就蹦起来准备出门吧，而中间这个穿衣服和洗漱正是过渡的操作

 

.box{
width: 120px;
height: 120px;
border:10px solid;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s;
}
.box:hover{
left: 50px;
top: 120px;
background: #742;
border: 20px solid #456;
}

transition：all 0.3s  可以解释为一切变化都用0.3s完成

接下来分解transition

transition-property：设置过得的属性

transition-duration：设置过渡所需的时间

transition-timing-function:  ease（默认过渡样式）

　　　　　　　　　　　　linear 线性过渡

　　　　　　　　　　　　ease-in  过渡由慢到快

　　　　　　　　　　　　ease-out 过渡由快到慢

　　　　　　　　　　　　ease-in-out 过渡线慢再快

过渡还可以多写

例：transition：margin-left  3s，margin-top  5s;

 

 

动画：animiation

这个是干啥的呢？

可以重复并且在相应帧做不同的和多种动画

animiation需要搭配keyframes来使用，

例：

@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -2400px 0;
}
}
.house{
width: 200px;
height: 100px;
background: url(img.png);
background-repeat: no-repeat;
background-position: 0 0;
animation: run 1s infinite steps(12,end) forwards;
};

先解释 keyframes的作用

标准格式  @keyframes  运动name{

　　　　　这里有两种写法：

　　　　　　第一种：

　　　　　　form{

　　　　　　background:red　　　　　这里表示运动开始的状态，一开始背景颜色为红色 　

　　　　　　　　}

　　　　　　to{

　　　　　　　　background：#000    表示最后为黑色

　　　　　　　　}

　　　　　　第二种（相应帧）这种通过百分比的可以更细致的规划相应的变化

　　　　　　　0%{

　　　　　　　background：red

　　　　　　}　　

　　　　　　　　50%{

　　　　　　　background：#000

　　　　　　}　

　　　　　　100%{

　　　　　　　background：blue

　　　　　　}

}

 

然后通过animiation来引用

　animiation： 运动名  5s（运动时间） infinite（表示重复播放，不写则只播放一次） step（步数（每个状态切换的步数），end（end表示丢失最后一帧，白柳当前帧的状态，若为start表示丢失第一帧，保留下一帧） forwards（表示当运动结束后保留最后一整的状态，不写则动画结束后回归原始样式） alternate（表示动画倒放））

 

以上是animiation的多写格式

分布来说：

animiation-name：运动名（也就是keyframes的运动名）

animiation-duration：表示运动时间

animiation-timing-function：linaer 表示线性渐变，这里和过渡的变化一致的

animiation-delay：2s  表示延时2s才开始运动

animiation-itearation-count：2  表示执行2次动画

 

在animiation中也有hover属性；

animiation-play-state：paused  暂停该动画