搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > A小前端 > HTML基础之动画

HTML基础之动画

A小前端 2020-07-31
  • 以下内容总结于网络,只做为个人笔记,不做商业用途,如有侵权,联系必删!

1、动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

2、先定义动画,再使用(调用)动画(哪个盒子要加动画,就调用对应的动画名称)

3、动画序列:0% 是动画的开始,50% ....... 100% 是动画的完成。这样的规则就是动画序列在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。一般我们用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

4、@keyframes 规定动画

  • .animation (动画的简写) 所有动画属性的简写属性,除了animation-play-state属性

  • animation-name 设置要使用的动画名animation-name:xxx;

  • animation-duration 设置动画播放的持续时间默认是0 animation-duration:3s

  • animation-timing-function 规定动画的速度曲线,默认是“ease”(linear:匀速 ease:慢-快-慢 ease-in:慢-快 ease-out:快-慢 )

  • animation-delay 规定动画何时开始,默认是0 animation-delay: 0s;

  • animation-iteration-count 设置动画播放的循环次数 animation-iteration-count: 2 ; infinite 为无限循环 reverse 反向运行alternate 正-反-正

  • animation-direction 规定动画是否在下一周期逆向播放,默认是“normal“,alternate逆播放

  • animation-play-state 规定动画是否正在运行或暂停。默认是"running",还有"paused"。

  • animation-fill-mode 设置动画在等待或者结束的时候的状态 (forwards:动画结束后,元素样式停留在 100% 的样式 backwards:在延迟等待的时间内,元素样式停留在 0% 的样式 both:同时设置了 forwards和backwards两个属性值)

5、复合写法

animation: name duration timing-function delay iteration-count direction fill-mode;

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

6、一个盒子加多个动画时用逗号隔开

  • animation:name duration timing-function delay iteration-count direction fill-mode,

  • animation: name duration timing-function delay iteration-count direction fill-mode;

7、代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        body{

            background-colorblack;

        }

        .bx{

            width200px;

            height100px;

            background-imageurl(bear.png);

            background-position0px 0px;

            positionabsolute;

            animation: dong 0.5s steps(80s infinite , move 4s linear 0s 1 fo            rwards,xia 1s steps(14s infinite

            xiaqian 5s steps(8004s forwards, zuo 1s steps(19s infinite,zuo            qian 5s steps(12009.1s forwards,

            shang 1s steps(114.2s infinite,shangqian 5s steps(80014.2s f              orwards,fuwei 1s steps(119.3s infinite;

        }

        @keyframes dong{

            0%{

                background-position0px 0px;

            }


            100%{

                background-position-1600px 0px;

            }

        }


        @keyframes move{


            0%{

                left0px;

            }


            100% {

                left1200px;

            }


        }

        @keyframes xia{

            0%{

                top0px;

                transformrotate(90deg);

            }

            100% {

                top800px;

            }

           

        }

        @keyframes xiaqian{


                 0%{

                 top0px;

           }


            100% {

                 top800px;

           }


        }

        @keyframes zuo{

            0%{

                 transformrotateY(180deg);

           }


           100% {

           }


        }

        @keyframes zuoqian{

            0%{

                 left1200px;

          }


           100% {

                left10px;

            }


       }

        @keyframes shang{

           0%{

                transform:rotate(270deg);

            }


           100% {

            }

        }

        @keyframes shangqian{

           0%{

               top:800px;

            }


           100% {

               top10px;

            }

        }

        @keyframes fuwei{

           0%{

               transformrotate(0deg);

            }


           100% {

            }

           }

    </style>

</head>

<body>

<div class="bx"></div>

</body>

</html>


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《HTML基础之动画》的版权归原作者「A小前端」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注A小前端微信公众号

A小前端微信公众号:gh_fad3c15f48a4

A小前端

手机扫描上方二维码即可关注A小前端微信公众号

A小前端最新文章

精品公众号随机推荐