CSS3动画

标签：

　　今天自己做了一个网页练习，用到了css3中的动画。css3只是在w3cshool初浅的了解了一下，并没有过多的去学习和应该过，所有对我来说还是一种挑战。参考的网站是AnyForWeb官网做的，在footer区有一个会动的指向“关于我们”的箭头图片，这个是用CSS3样式来做的。当时我的样式是这样写的

.floating{
    animation-name:floating;
    animation-duration:1.5s;
    animation-iteration-count:infinite;
}

　　但是并没有动画效果。

　　然后我在w3cShool打开在线文档，查看CSS3动画的用法，原来才恍然大悟，css3动画并不止写样式，还需要学习一个特殊的东西@keyframes，它的名字是动画帧。它的语法是关键字@keyframes开头，加动画名称，再加上一对花括号{}。花括号里面是动画从开始到结束要执行的动画，可以使用from{transform:value;}to{transform:value;}，也可以用百分比来表示，如：0%开始，100%结束

　　接下来不得不提的tranform,中文翻译：变形。tranform与transition我个人很容易混淆。它们都是CSS3制作动画的属性：

　　　　变形：transfrom：旋转：rotate，扭曲：skew，缩放：scale，移动：translate等值 ；

　　　　转化：transition

　　　　动画：animation

注意：变形transform可以同时设定多个值，以空格的形式隔开。

　　　　接下来是完整的CSS3动画样式

 @keyframes floating {
            0%{
                /* Y 轴上的移动*/
                transform:translateY(0%);
            }
            50%{
                transform:translateY(8%);
            }
            100%{
                transform:translateY(0%);
            }
        }

        /* 将“floating” 动画绑定到.floating 选择器上 必须至少规定两个属性，规定动画时长和动画名称 */
  .floating{
            animation-name:floating;/* 动画的名称 */
            animation-duration:1.5s;/* 动画所持续的时间长 */
            animation-iteration-count:infinite;/*动画的循环次数*/

        }

总结：其实web有很多要学的，而现在自己知道的东西只如皮毛，CSSS3就只是几个部分但是都还没好好的研究过。接下来要多花时间去多做练习，只有这样才能知道自己还有哪些不足，能力在哪里？

CSS3动画

标签：

原文地址：http://www.cnblogs.com/linyongli/p/5396526.html