其他分享
首页 > 其他分享> > WEB前端第十七课——CSS动画

WEB前端第十七课——CSS动画

作者:互联网

1.animation动画

  transition属性只能简单模拟动画效果,而animation属性可以制作类似Flash动画

  通过关键帧控制动画的每一步,使元素从一中样式变为另一种样式,实现复杂的动画效果

2.@keyframes,用于声明动画,指定关键帧

  帧,用于分解动画动作,每一帧代表某个时间点

  书写格式:

  @keyframes name(自定义名称){

    from | 0% {  CSS样式  }

    percent | n% {  CSS样式  }

    to | 100% {  CSS样式  }

  }

3.animation属性,用于调用及控制由@keyframes定义的动画

  简写属性书写格式:animation:name  duration  timing-function  delay  iteration-count  direction

  animation-name,设置需要调用的@keyframes动画的名称

  animation-duration,播放动画持续的时间周期,时间单位 s/ms

  animation-timing-function,设置动画播放的时间曲线,属性值与 transition-timing-function相同,包括 linear、ease、ease-in、ease-out、ease-in-out等

  animation-delay,设置动画何时开始(延迟时间)

  animation-iteration-count,设置动画播放的次数,属性值:n(数值,默认为1)、infinite(无限次/永远)

  animation-direction,设置循环交替时反向播放动画,

             属性值:normal(正常播放,默认)、reverse(反向播放)、alternate(奇数次正向播放、偶数次反向播放)、alternate-reverse(奇数次反向播放、偶数次正向播放)

  animation-fill-mode,规定当动画未播放时(播放完或开始前)应用到元素的样式,

             属性值:none(无样式,默认)、forwards(在动画结束后(由animation-iteration-count决定)应用该属性值)、

                backwards(应用在animation-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值)

                both(同时遵循forwards和backwards 的规则)

  animation-play-state,运行或暂停动画,属性值:paused(暂停)、running(运行,默认)

4.轮播图测试代码

<html>
<head>
    <meta charset="utf-8">
    <title>CSS_animation</title>
    <style>
        .cont{
            width: 600px;
            height: 600px;
            background-color: #e5e5e5;
            margin: 50px auto;
            background-image: url("images/number/one.jpg");
            background-repeat: no-repeat;
            background-position: center;
            -webkit-animation: rot 8s ease-in 1s 3 alternate forwards;
        }
        @-webkit-keyframes rot {
            0%{
                background-image: url("images/number/one.jpg");
            }
            25%{
                background-image: url("images/number/two.jpg");
            }
            50%{
                background-image: url("images/number/three.jpg");
            }
            75%{
                background-image: url("images/number/four.jpg");
            }
            100%{
                background-image: url("images/number/five.jpg");
            }
        }
    </style>
</head>
<body>
    <div class="cont">
    </div>
</body>
</html>

5.border绘制三角形、梯形

<html>
<head>
    <meta charset="utf-8">
    <title>CSS_graph</title>
    <style>
        .cont{
            width: 0px;    /* width=0时,三角形;width>0时,梯形;其他三个方向设置同理 ’*/
            /*height: 100px;*/
            background-color: transparent;
            margin: 100px auto;
            /*border-top: 120px solid red;*/
            border-right: 120px solid transparent;
            border-bottom: 120px solid green;
            border-left: 120px solid transparent;
        }
    </style>
</head>
<body>
    <div class="cont">
    </div>
</body>
</html>

  

标签:WEB,动画,第十七,animation,background,播放,CSS,属性
来源: https://www.cnblogs.com/husa/p/13434973.html