css3 过渡和动画
2018-03-30 本文已影响0人
张鸽
transition 过渡
让css变化平滑一些
属性：
| 属性 | 描述 |
|---|---|
| transtion-property | 指定过渡的属性 |
| transtion-duration | 指定过渡所需时间 |
| transtion-timing-function | 指定过渡函数 |
| transtion-delay | 指定过渡延迟时间 |
语法：
transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间； //合在一起
栗子：
<style>
img{
height:150px;
width:150px;
transition: height 0.5s linear 0.5s;
}
img:hover{
height:100px;
}
</style>
transition的优点在于简单易用，但是它有几个很大的局限。
- transition需要事件触发，所以没法在网页加载时自动发生。
- transition是一次性的，不能重复发生，除非一再触发。
- transition只能定义开始状态和结束状态，不能定义中间状态。
- 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
animation 动画
通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果
属性：
| 属性 | 描述 |
|---|---|
| animation-name | 指定关键帧动画的名字 |
| animation-duration | 指定动画播放所需时间，单位秒 |
| animation-timing-function | 指定动画播放方式 |
| animation-delay | 指定动画开始时间，单位秒 |
| animation-iteration-count | 指定动画的播放次数，默认为1，若为infinite，则无限次循环播放 |
| animation-direction | 指定动画的播放方向，默认为normal，若为alternate，即轮流反向播放 |
制作动画分为两部分：
- 用关键帧声明一个动画
- 在animation调用关键帧声明的的动画。
@keyframes就是关键帧，一个动画中可以有很多个帧。
一个@keyframes中的样式规则是由多个百分比构成的，可以在这个规则上创建多个百分比，从而达到一种不断变化的效果。
栗子：
<style>
img{
width:90px;
height:90px;
animation: mychange 1s infinate 1s;
-webkit-animation: mychange 1s infinate 1s;
}
@keyframes mychange{
0%{width:90px; height:90px; }
50%{width:130px; height:130px;}
100%{width:200px; height:200px;}
}
@-webkit-keyframes mychange{
0%{width:90px; height:90px; }
50%{width:130px; height:130px;}
100%{width:200px; height:200px;}
}
</style>
上面代码中的0% 100%的百分号都不能省略，0%可以由from代替，100%可以由to代替。要让mychange动画有效果，就必须要通过CSS3 animation属性来调用它
区别
transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果
