在CSS3中主要依靠transitions和animations实现动画功能
Transtions
- 主要用法
transitions:property duration timing-function - property表示要更改的属性，duration表示更改所用时间，timing-function表示过渡方式，一般使用linear使用相同时速度平滑过渡，举个栗子
div{
position: absolute;
left:10px;
width: 100px;
background-color: red;
-webkit-transition: left 2s linear;
}
div:hover{
left:200px;
}
- 也可以将这个属性拆分来写
div{
position: absolute;
left:10px;
width: 100px;
background-color: red;
-webkit-transition-property: left;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear ;
}
div:hover{
left:200px;
}
- 也可以使用该属性值同时过渡多个值
div{
position: absolute;
left:10px;
width: 100px;
background-color: red;
-webkit-transition: left 2s linear,background-color 2s linear;
}
div:hover{
left:200px;
background-color: darkblue;
}
Animations
- animations与属性transitions最大的区别就是animations通过定义多个关键帧来实现更加复杂的动画，举个例子
div {
position: absolute;
left:10px;
width:200px;
background-color: red;
}
@-webkit-keyframes mycolor {
0% {
left: 10px;
background-color: red;
}
25% {
left:200px;
background-color: darkblue;
}
50% {
left: 400px;
background-color: yellow;
}
75%{
left: 200px;
background-color: darkblue;
}
100% {
left:10px;
background-color: red;
}
}
div:hover {
-webkit-animation: mycolor 5s linear;
-webkit-animation-iteration-count: infinite;
}
- firefox使用@-moz-keyframes定义关键帧
实现动画的方法
| 方法 | 描述 |
|---|---|
| linear | 动画速度保持不变 |
| ease-in | 先慢后快 |
| ease-out | 先快后慢 |
| ease | 慢-快-慢 |
| ease-in-out | 同上 |
