码迷,mamicode.com
首页 > Web开发 > 详细

CSS3动画

时间:2016-04-15 19:54:58      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

  今天自己做了一个网页练习,用到了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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!