css3可以做产品动画吗,传说中的css3制作动画原来是这样

原标题：传说中的css3制作动画原来是这样

先来看看示例图：

这是我们第一次接触到css3动画

先来了解css3制作动画最核心的一句话(以后每次做动画都要写的)

动画

核心

animation

就是这个家伙了

当然光写这么一个单词就能实现各种各样的动画肯定是不现实的

接下来需要了解的是

制作动画，都要管哪些属性(比如动画是不是重复播放拉；动画多久时间完成啦；动画是播放一次还是一直播放拉等等)

动画

参数

animation【name duration timing-function delay iteration-count direction;】

有这么六个参数需要你来设置

例如一开始我们制作的那个css3动画就是：

【animation:x 2s ease 0s infinite alternate】

分别解释一下这六个属性(一定要记牢)

name：x

接下来会有一个叫做x的动画，控制我这个物体怎么怎么动起来

duration：2s

这个动画要2秒钟的时间完成一次

timing-function：ease

动画将以减缓速度情况来完成(想象一下小球下落是加速还是减速还是匀速)

delay：0s

动画延迟0秒钟开始

iteration-count：infinite

这个动画要一直循环下去

direction：alternate

动画以往复交替的形式运作(例如从A走到B,然后从B往复走回到A)

keyframes

还记得我们刚才介绍的第一个属性吗

【animation:x2s ease 0s infinite alternate】

这x是个什么东东？

难道你写一个x放这里，电脑就知道要做一个什么样的动画吗？

当然不会

接下来你要通过书写keyframes来告诉电脑

这个x要发生什么样的事情

开头的案例是这样写的：

@keyframes x{

from{ transform:perspective(400px) rotateY(0);}

to{ transform:perspective(400px) rotateY(360deg);}

}

大概意思是说，这个x啊

它要我们动画从0度转到360度，按照y轴来转(你可以试试把y改成x会怎样)

下面的是给大家准备好的笔记和源代码

.bg-success{ width:100px; height:100px; background-color:#aaa; text-align:center; line-height:100px;}

.y{ animation:x 2s ease 0s infinite alternate ;}

@keyframes x{

from{ transform:perspective(400px) rotateX(0);}

to{ transform:perspective(400px) rotateX(360deg);}

}

css3 做动画

51rgb

ps：把这些东东拷贝到记事本里，另存为51rgb.htm试试看效果怎样返回搜狐，查看更多

责任编辑：