css3动画类型有几种

小编给大家分享一下css3动画类型有几种，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！css3动画类型有3种：1、使用transition属性实现的渐变动画；2、使用transform属性实现的转变动画；3、使用animation属性和“@keyframes”规则实现的自定义动画。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css实现动画主要有3种方式，第一种是：transition实现渐变动画，第二种是：transform转变动画，第三种是：animation实现自定义动画，下面具体讲一下3种动画的实现方式。我们先看一下transition的属性：property:填写需要变化的css属性如：width,line-height,font-size,color等,所有作用与dom样式的属性;duration:完成过渡效果需要的时间单位(s或者ms)timing-function:完成效果的速度曲线（linear,ease,ease-in,ease-out等等）timing-function具体的值可以看下面的表格：下面我们看一个完整的例子：运行效果：
可以看到，鼠标移上去的时候，动画延迟0.5s开始，并且由于border-color没有设置到transition-property里面，所以是没有渐变动画的。transform属性应用于2D 或 3D转换。该属性允许我们能够对元素进行旋转、缩放、倾斜、移动这四类操作.一般是配合transition的属性一起使用。none：定义不进行任何转换，一般用于注册掉该转换。transform-functions：定义要进行转换的类型函数。主要有：1、旋转(rotate)：主要分为2D旋转和3D旋转。rotate(angle)，2D 旋转，参数为角度，如45deg；rotate(x,y,z,angle)，3D旋转，围绕原地到(x,y,z)的直线进行3D旋转；rotateX(angle)，沿着X轴进行3D旋转；rotateY(angle)；rotateZ(angle)；2、缩放(scale)：一般用于元素的大小收缩设定。主要类型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z为收缩比例。3、 倾斜(skew)：主要用于对元素的样式倾斜。skew(x-angle, y-angle)，沿着x和y轴的2D倾斜转换；skewX(angle)，沿着x轴的2D倾斜转换；skew(angle)，沿着y轴的2D倾斜转换。4、移动(translate)：主要用于将元素移动。translate(x, y)，免费云主机、域名定义向x和y轴移动的像素点；translate(x, y, z)，定义像x、y、z轴移动的像素点；translateX(x)；translateY(y)；translateZ(z)。运行效果：
可以看到盒子发生了旋转，倾斜，平移，放大。为了实现更灵活的动画效果，css3还提供了自定义动画的功能。(1) name：需要绑定到选择器的keyframe名称。
(2) duration：完成该动画需要花费的时间，秒或毫秒。
(3) timing-function：跟transition-linear一样。
(4) delay：设置动画在开始之前的延迟。
(5) iteration-count：设置动画执行的次数，infinite为无限次循环。
(6) direction：是否轮询反向播放动画。normal，默认值，动画应该正常播放；alternate，动画应该轮流反向播放。运行效果：
可以看到，自定义动画能实现更灵活的动画效果，包括了第一种和第二种动画的所有功能，而且属性也更全面。以上是“css3动画类型有几种”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: div css怎么去掉A超链接下划线

这篇文章主要介绍了div css怎么去掉A超链接下划线的相关知识，内容详细易懂，操作免费云主机、域名简单快捷，具有一定借鉴价值，相信大家阅读完这篇div css怎么去掉A超链接下划线文章都会有所收获，下面我们一起来看看吧。 text-decoration:no…