简单的css3动画


开发工具与关键技术:Dw-css3

作者:谢嘉浚

撰写时间:2019-01-17

Css3的动画可以把元素从一种样式逐渐变换为另一种样式的效果。

Css3包含了transform(变形)、transition(过渡)、animation(动画) 三大属性。

首先定义一个div,然后给它设置宽高、背景颜色

简单的css3动画_第1张图片
上面的复合属性可以写在同一个animation上面,如果对应的值没有给它赋值就是默认的值。

这样就可以少写部分代码。

transform:用于设置变形,可以支持一个或多个变形函数

例如下图同时设置它的位移和旋转,然后在上面用animation调用动画。

@keyframes 定义的动画名一定要和animation调用的动画名一致,不然是没有任何动画效果的。
简单的css3动画_第2张图片

你可能感兴趣的:(简单的css3动画)