实现CSS动画有两种主要的方法:过渡动画(transition)和animation动画。
1、过渡动画(transition)
可以让CSS的一些变化变得平滑。
transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间;
(1)例:
transition的属性可以分开写,也可以放在一起写,比如下面的代码,图片的宽高本来都是15px,想要让它1秒的时间内过渡到高为450px,通过:hover来触发,那么代码就可以如下:
img{
height:15px;
width:15px;
transition: height 1s ease 1s;/*合在一起*/
}
或者:
img{
height:15px;
width: 15px;
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;/*属性分开写*/
}
img:hover{
height: 450px;
}
(2)属性详解:
1)transition-property
不是所有属性都能过渡,只有属性具有一个中间点值才具备过渡效果。完整列表,见这个列表 ,具体效果,见 这个页面。
2)transition-duration
指定从一个属性到另一个属性过渡所要花费的时间。默认值为0,为0时,表示变化是瞬时的,看不到过渡效果。
3)transiton-timing-function
过渡函数,有如下几种:
liner :匀速
ease-in:减速
ease-out:加速
ease-in-out:先加速再减速
cubic-bezier:三次贝塞尔曲线
2、animation
animation属性通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成:
- 用关键帧@keyframes声明一个动画;
- 在animation属性中调用关键帧声明的动画。
Note:
- animation属性到目前位置得到了大多数浏览器的支持,但是,需要添加浏览器前缀哦!需要添加浏览器前缀哦!需要添加浏览器前缀哦!
- 一个@keyframes中的样式规则是由多个百分比构成的,@keyframes必须要加webkit前缀。
(1)例:
/*第一种:加前缀*/
div:hover {
-webkit-animation: 1s changeColor;
}
@-webkit-keyframes changeColor {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
/*第二种:不加前缀*/
div:hover {
/*动画播放的时间1s,关键帧的名字changeColor*/
animation: 1s changeColor; /*1s内实现0%到100%的过渡*/
}
@keyframes changeColor { /*关键帧*/
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
(2)属性详解:
3、区别
animation属性类似于transition,他们都是随着时间改变元素的属性值,其主要区别在于
- transition需要触发一个事件才会随着时间改变其CSS属性。在鼠标hover时的动画效果大多使用过渡动画;
- animation在不需要触发任何事件的情况下,也可以随时间变化来改变元素CSS属性,达到一种动画的效果。在网页加载后立即执行不需要手动触发时大多使用animation动画。