传说中的css3制作动画原来是这样
Posted UI设计自学平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了传说中的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:x 2s 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会怎样）
下面的是给大家准备好的笔记和源代码
<head>
<style>
.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);}
}
</style>
</head>
<body>
<h4>css3 做动画</h4>
<div class="bg-success y">
<a>51rgb</a>
</div>
</body>
ps：把这些东东拷贝到记事本里，另存为51rgb.htm试试看效果怎样
以上是关于传说中的css3制作动画原来是这样的主要内容，如果未能解决你的问题，请参考以下文章