css3动画重点 |图片预览css特效

1. 使用@keyframes定义动画

@keyframes myanimation {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}

@keyframes是定义动画的关键。通过定义起点和终点，大家可以定义出一段动画过程，然后通过animation属性来实现动画效果。

2. animation属性常用属性

animation: myanimation 3s ease-in-out infinite;

animation属性是定义动画的属性。有很多参数可以配置，其中包括动画名称、持续时间、缓动函数、延迟等等。其中最常用的属性是animation-name、animation-duration、animation-timing-function和animation-iteration-count。

3. transform属性

transform: scale(1) translate(0,0) rotate(0);

transform属性是用来对元素进行变换的。通过scale、translate、rotate等函数，可以改变元素的位置、大小和角度，从而实现各种各样的动画效果。

4. transition属性

transition: all 0.3s ease-in-out;

transition属性可以让元素在特定条件下以过渡效果进行变化。它的作用和动画类似，但是是在元素发生变化时触发的。常用的属性包括transition-property、transition-duration、transition-timing-function和transition-delay。

以上就是CSS3动画的重点内容。除此之外，大家还可以用CSS3实现更为复杂的动画效果，如3D变换、动画序列、动画组等等。学好CSS3动画可以让你的网页设计更加生动！