css ios动画,css3 动画效果

css3 动画效果

js动画代码复杂，css3的推出transition,transform后。简单2行，也可以有炫酷动画了。

下面我就是结合个人理解进行介绍。最后个人做的一个动画demo

css3的动画事例主要需要理解animation：可以算是动画的声明部分。你可以把动画属性的内容全部写到后边，动画的属性主要有：animation-name animation-duration还有一些动画延时，动画播放次数。这些要根据动画效果进行添加。

动画内容格式：

@keyframes animation-name{  动画值}

对于不同浏览器要用不同的前缀。

对于想要改变动画效果位置的，需要在元素上做position:relative 的声明效果。

div {

width: 100px;

height: 100px;

margin-top: 100px;

position: relative;

background-color: red;

animation:myfirst 2s linear 2s infinite alternate;//动画名为myfirst 动画时长2秒，匀速，延时2秒，无即播放。

-webkit-animation:myfirst 2s;//safari 浏览器适用。如果想适用其它浏览器，用-moz- 火狐 －0-opear

}

@keyframes myfirst{

0%{background:red;transform:rotate(0);left: 0px;top: 0px; }

15%{background: greenyellow;transform:rotate(15deg);left: 0px;top: 0px;}

50%{background: greenyellow;transform:rotate(15deg);left: 300px;top: 0px;}

100%{background:red;transform:rotate(-360deg);left: 0px;top:0px; }

@-webkit-keyframes myfirst{

0%{background:red;transform:rotate(0);left: 0px;top: 100px; }

15%{background: greenyellow;transform:rotate(15deg);left: 0px;top: 0px;}

50%{background: greenyellow;transform:rotate(15deg);left: 300px;top: 0px;}

100%{background:red;transform:rotate(-360deg);left: 0px;top:0px; }

}

@-moz-keyframes myfirst{

0%{background:red;transform:rotate(0);left: 0px;top: 100px; }

15%{background: greenyellow;transform:rotate(15deg);left: 0px;top: 0px;}

50%{background: greenyellow;transform:rotate(15deg);left: 300px;top: 0px;}

100%{background:red;transform:rotate(-360deg);left: 0px;top:0px; }

}

@-o-keyframes myfirst{

0%{background:red;transform:rotate(0);left: 0px;top: 100px; }

15%{background: greenyellow;transform:rotate(15deg);left: 0px;top: 0px;}

50%{background: greenyellow;transform:rotate(15deg);left: 300px;top: 0px;}

100%{background:red;transform:rotate(-360deg);left: 0px;top:0px; }

}

hello word!