简单实用的css3动画

首先，我们来归纳一下常见的css3动画属性

透明度

opacity:0; 透明度为0

左右位移,上下位移

transform: translateX(x); 定义转换，只是用 X 轴的值

transform: translateY(y); 定义转换，只是用 Y 轴的值

transform: translate(x,y); 定义 2D 转换

transform: translate3d(x,y,z); 定义 3D 转换缩放

transform: scale(x,y); 定义 2D 缩放转换

transform:scale3d(x,y,z); 定义 3D 缩放转换旋转

transform: rotate(angle); 定义 2D 旋转，在参数中规定角度

transform:rotate3d(x,y,z,angle); 定义 3D 旋转

animation 属性

animation: name duration delay iteration-count direction timing-function;

六个属性分别为： 名称，动画花费时间，动画延迟时间，次数，是否轮流反复播放，运行速度曲线。

来写一个简单的不倒翁动画吧。

html

<div class="move"></div>

css

.move{

width: 120px; height: 200px; background: #fff; margin: 60px auto; border-radius: 45%; border: 3px solid #000;

animation:swing 0.8s 1.3s infinite alternate linear;

-webkit-animation:swing 0.8s 1.3s infinite alternate linear;

transform-origin: bottom;

-webkit-transform-origin: bottom;

}

@keyframes swing{

0% {

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

50% {

-webkit-transform: rotate(0);

transform: rotate(0);

}

100% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

}

/* Safari and Chrome */

@-webkit-keyframes swing {

0% {

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

50% {

-webkit-transform: rotate(0);

transform: rotate(0);

}

100% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

}

简单的动画就完成了，你也可以按照这种方式定义其他的效果，比如左右移动，放大缩小等，都是大同小异的。

这样看起来是不是很简单，切图网，我们不套路，我们讲思路。授人以鱼不如授人以渔。

想要真实的商业实战的可以加一下qq:6135833

---------------------------------------------

www.qietu.com 切图网，专注于前端开发和实战培训。

培训咨询qq：6135833

前端交流群：308736107