【CSS】css3之动画

        最近做项目，有幸想要调整动画效果，从网上查找了写资料，发现原来在CSS3之后有了相关内容，并且使用、制作很方便。

        下面是做项目中的一个demo，如何使图片动态变大变小：

静态页面

       <img id="img_circle" src="images/circle.png"  />

样式

       上面就是一个简单的img标签，相信大家都熟悉的很。下面看一下主要的样式设计。由于是动态的变化，根据CSS3要求，需要先定义动态效果。

效果

@keyframes img_change {
        	/*from到to中的内容完全是对应元素的属性，也就是说通过规定初始样式和最终样式，然后调用CSS3动画效果，即可实现元素的动态显示*/
            from {
                height:15%;   /*高度由15%*/
            }
            to {
                height:20%;/*扩大为20%*/
            }
        }

使用

      上面的@keyframes是非常关键的，这是CSS3中定义动态效果的关键字，img_change则是效果的名称，可以自定义。from即从什么样式到to什么样式。效果定义好了，需要使用animation属性进行使用

        #result #circle img {
            height:15%;
            animation-name:img_change;/*效果名称，与关键字@keyframes相对应*/
            animation-duration:1.0s;  /*一个周期所需时间（毫秒）*/
            animation-delay:0s;   /*动作开始时间*/
            animation-iteration-count:infinite;  /*动画播放次数；默认为1；infinite为永久播放*/
            animation-direction:alternate;/*下一个周期逆向播放*/
            animation-timing-function:linear;
        }

       效果大家可以尝试哦,下面是本例的效果图。

       另外，这个链接是CSS3关于动画方便的介绍，很详细，可以尝试着玩玩          哦。http://www.w3school.com.cn/css3/css3_animation.asp