登录  /  注册
首页 > web前端 > css教程 > 正文

关于CSS实现动画详解及实例

高洛峰
发布: 2017-03-28 17:40:13
原创
2241人浏览过

css3 动画

  在css3中可以通过animation创建复杂的动画序列,像transition属性一样用来控制css的属性实现动画效果。
  animation实现动画效果主要由两个部分组成。

  1. 通过类似Flash动画中的关键帧来声明一个动画。

  2. 在animation属性中调用关键帧声明的动画,从而实现一个更为复杂的动画效果。

声明关键帧

  在CSS3中,把@keyframes称为关键帧。
  @keyframes的语法规则:命名是由@keyframes开头,后面紧跟着动画的名称(animation-name),再加上一对花括号"{...}",括号中是多个不同时间段的样式规则。一个@keyframes中的样式规则是由多个百分比构成的,每个百分比样式规则可以设置不同的样式属性。可以使用关键词“from”,“to”代表一个动画的开始与结束,“from”相当于0%,"to"相当于100%。

@keyframes yxz {
 0% {
    margin-left: 100px;
    background: green;
 }
 40% {
    margin-left: 150px;
    background: orange;
 }
 60% {
    margin-left: 75px;
    background: blue;
 }
 100% {
    margin-left: 100px;
    background: red;
 }
}
登录后复制

  这里我们定义了一个叫“yxz”的动画,他的动画是从0%开始到100%时结束,从中还经历了一个40%和60%两个过程,上面代码具体意思是:“yxz”动画在0%时元素定位到left为100px的位置背景色为green,然后40%时元素过渡到left为150px的位置并且背景色为orange,60%时元素过渡到left为75px的位置,背景色为blue,最后100%结束动画的位置元素又回到起点left为100px处,背景色变成red。假设置我们只给这个动画有10s的执行时间,那么他每一段执行的状态如下图所示:

关于CSS实现动画详解及实例

  在@keyframes中的关键帧并不是一定要按照顺序来指定,其实可以任何顺序来指定关键帧,因为动画中的关键帧顺序由百分比值确定而不是声明的顺序。

@keyframes yxz{
    0%,40%{
        width:200px;
        height:200px;
    }
    20%,60%,80%{
        width:100px;
        height:100px;
    }
    100%{
        width:0;
        height:0;
    }
}
登录后复制

  在这个例子中,0%,40%应用了相同的样式,20%,60%,80%也应用了相同的样式,100%时又是另外的样式。
  这两个动画,因为他们并没有附加到任何元素上,是没有效果的。通过声明@keyframes动画后,要让动画生效,需要通过CSS属性来调用@keyframes声明的动画。

调用关键帧

  使用动画属性animation调用@keyframes声明的动画。 动画属性animation,是一个复合属性,它包含了八个子属性。其语法如下:

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-play-state> || <animation-fill-mode>] *</animation-fill-mode></animation-play-state></animation-direction></animation-iteration-count></animation-delay></animation-timing-function></animation-duration></animation-name>
登录后复制

关于CSS实现动画详解及实例

  animation-name:主要用来指定一个关键帧动画的名字,这个名字要与@keyframes声明的名称一样。css加载动画时会应用对应的名字来执行。

animation-name:none | IDENT [,none | IDENT] *
登录后复制

  IDENT:是由@keyframes创建的动画名称。
  none:默认值,当值为none时,没有任何动画效果,可以用来覆盖动画。

  animation-duration:主要用来设置动画播放所需要的时间,单位以s(秒)或ms(毫秒),默认值为0。

animation-duration:<time> [,<time>] *</time></time>
登录后复制
登录后复制

  animation-timing-function:主要用来设置动画的播放快慢方式。

  与transition-timing-function类似,可点击查看。

  animation-delay:主要用来设置动画延迟时间。

animation-duration:<time> [,<time>] *</time></time>
登录后复制
登录后复制

  当time为正整数时为延迟时间,负整数时会截断播放时间(把animation-duration所用的时间截断一部分,就是说跳过这部分值,直接进行后面的动画)  

  animation-iteration-count:主要用来设置动画播放的次数。

animation-iteration-count: infinite | <number> [,infinite | <number>] *</number></number>
登录后复制

  通常为整数,也可以使用浮点数。默认值为1。如果取值为infinite,动画会无限播放。

  animation-direction:主要用来设置动画播放的方向。

animation-direction:normal | alternate [,normal | alternate] *
登录后复制

  默认值为normal,动画每次循环都是向前播放。alternate,动画向前播放一次,向后播放一次。

  animation-play-state:主要用来控制动画播放的状态。

animation-play-state:running | paused [,running | paused] *
登录后复制

  running是默认值,是播放的意思,可以通过paused停止播放。

  animation-fill-mode:主要用来设置动画时间之外的属性,也就是动画开始前或者结束后的属性。

animation-fill-mode:none | forwards | backwards | both
登录后复制

  默认值为none,表示动画按期执行与结束,在动画结束时,会反回初始状态。forwards,当动画结束时,停留在最后最后一帧(保持最后的状态)。backwards,当动画开始时迅速应用第一帧。both,同时拥有forwards与backwards的作用。

学以致用,学习完动画的基础知识后,就需要练习一下,把学的东西用出来。可以把代码复制在浏览器中观看效果。

nbsp;html&gt;



<meta><title></title><style>
    /*元素从左边出现*/
    @keyframes bga {
        0% {
            left: -500px;
        }

        100% {
            left: 0;
        }
    }
    /*元素从下边出来*/
    @keyframes bgb {
        0% {
            top: 350px;
        }

        100% {
            top: 0;
        }
    }
    /*元素从小到大*/
    @keyframes bgc {
        0% {
            transform: scale(0.1);
        }

        100% {
            transform: none;
        }
    }
    /*元素从大到小*/
    @keyframes bgd {
        0% {
            transform: scale(2);
        }

        100% {
            transform: none;
        }
    }
    /*元素旋转并放大*/
    @keyframes bge {
        0% {
            transform: rotate(-360deg) scale(0.1);
        }

        100% {
            transform: none;
        }
    }
    /*选中元素时,隐藏其他元素*/
    @keyframes no {
        0% {
            z-index: 23;
        }

        100% {
            z-index: 23;
        }
    }
    /*兼容webkit浏览器*/
    @-webkit-keyframes bga {
        0% {
            left: -500px;
        }

        100% {
            left: 0;
        }
    }

    @-webkit-keyframes bgb {
        0% {
            top: 350px;
        }

        100% {
            top: 0;
        }
    }

    @-webkit-keyframes bgc {
        0% {
            transform: scale(0.1);
        }

        100% {
            transform: none;
        }
    }

    @-webkit-keyframes bgd {
        0% {
            transform: scale(2);
        }

        100% {
            transform: none;
        }
    }

    @-webkit-keyframes bge {
        0% {
            transform: rotate(-360deg) scale(0.1);
        }

        100% {
            transform: none;
        }
    }

    @-webkit-keyframes no {
        0% {
            z-index: 23;
        }

        100% {
            z-index: 23;
        }
    }

    * {
        margin: 0;
        padding: 0;
    }

    html, body {
        height: 100%;
    }

    img.bg {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
    }

    .demo p {
        position: absolute;
        z-index: 9999;
    }

    a {
        display: block;
        width: 100px;
        height: 100px;
        background: rgba(255, 0, 0,.2);
        margin-bottom: 15px;
        text-decoration: none;
        color: #ffffff;
    }

    #bga:target {
        z-index: 100;
        -webkit-animation:bga 2s ease;
        animation:bga 2s ease;
    }

    #bgb:target {
        z-index: 100;
        -webkit-animation:bgb 2s ease;
        animation:bgb 2s ease;
    }

    #bgc:target {
        z-index: 100;
        -webkit-animation:bgc 2s ease;
        animation:bgc 2s ease;
    }

    #bgd:target {
        z-index: 100;
        -webkit-animation:bgd 2s ease;
        animation:bgd 2s ease;
    }

    #bge:target {
        z-index: 100;
        -webkit-animation:bge 2s ease;
        animation:bge 2s ease;
    }
</style><p>
    </p><p>
        </p>
登录后复制
         关于CSS实现动画详解及实例     关于CSS实现动画详解及实例     关于CSS实现动画详解及实例     关于CSS实现动画详解及实例     关于CSS实现动画详解及实例

关于CSS实现动画详解及实例

关于CSS实现动画详解及实例

CSS3动画完。

以上就是关于CSS实现动画详解及实例的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号