HTML5学习笔记（7）—CSS3动画入门

CSS3动画效果有变形（transform）、过渡变换（transition）和动画（animation）

一、变形

transform：rotate（旋转）、scale（缩放）、skew（倾斜）、translate（移动）、matrix（矩阵变形）

// 旋转，顺时针旋转30度





Hello


//缩放，宽度变为原来的2倍，高度变为原来的3倍，
-webkit-transform:scale(2,3);/* Safari and Chrome */

//倾斜：在X轴倾斜20度和Y轴倾斜30度
-webkit-transform:skew(30deg,20deg);/* Safari and Chrome */

PS：div挎号{}里需要分号;

二、过渡变换

CSS3过渡是元素从一种样式逐渐改变为另一种样式的效果，transition主要包含4个属性值。

 




鼠标移动到 div 元素上，查看过渡效果。
注意： 过渡效果需要等待一秒后才开始。

但是上面这种写法的变换无法同步进行的，效果是先把width迅速变换为500，在按要求变换height为120。即两步变化，而且第一步的变化时间会变为0。下面这种写法就是可以同步进行的。

 




变变变







鼠标移动到 div 元素上，查看过渡效果。
注意： 过渡效果需要等待一秒后才开始。

三、动画

动画是使一种样式逐渐变好到另一种样式的效果，可用百分比来规定变化发生的时间。@keyframes叫做关键帧。

注释：我变绿了（颜色是渐变的）。

多种属性设置

 



大家好
嘿嘿嘿

四、区别

transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

1）动画不需要事件触发，过渡需要。

2）过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。