CSS动画

作者: 你猜_e00d | 来源:发表于2018-08-16 21:29 被阅读0次

animation动画

动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态
infinite不限制次数
alternate动画结束后返回,返回也算次数
animation-fill-mode 动画前后的状态
forwards动画完成保持在最后一帧
backwards在延迟时间内,在动画显示之前,应用from开始属性值(例如box宽100,from宽200,在延迟1s内显示200)
both向前和向后填充模式都被应用(例如起始按200,结束停在最后一帧
动画运行animation-play-state: running
动画暂停animation-play-state: paused

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>animation动画</title>
   <style type="text/css">
       .box{
           width: 100px;
           height: 100px;
           background-color: gold;
           animation: moving 1s ease 1s 5 alternate both;
           /*动画暂停*/
           /*animation-play-state: paused;*/
       }
       .box:hover{
           /*动画运行*/
           /*animation-play-state: running;*/
       }
       /*定义一个动画,名称为moving*/
       @keyframes moving{
           /*初始状态*/
           from{
               width: 200px;
           }
           /*结束状态*/
           to{
               width: 500px;
           }
       }
   </style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

多帧动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多帧动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin: 50px auto 0;
            animation: moving 1s ease 1s both;
        }
        @keyframes moving{
            0%{
                /*位移动画*/
                transform: translateY(0px);
                background-color: cyan;
            }
            50%{
                transform: translateY(400px);
                background-color: gold;
                border-radius: 0px;
            }
            100%{
                transform: translateY(0px);
                background-color: red;
                border-radius: 50px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

相关文章

  • CSS-3D知识

    1.CSS动画 1.1 CSS动画属性-animation animation:为CSS动画属性,使用该属性可以替...

  • Css动画 小球横移

    学习css 动画,建立小球左右横移的动画原料:html5 Css3html CSS css 动画属性介绍 其中an...

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • 有用的Vue第三方库

    Animate.css - CSS动画库 Velocity.js - JS动画库 TweenJS - 状态过渡动画...

  • 动画类文章

    css3常用动画+动画库 vue2使用animate css

  • Vue.js 过渡动画

    1. css实现过度 transition 动画 css-transform动画 动态组件 上述动画,如果设置mo...

  • 前端开发入门到实战:CSS动画@keyframes的用法

    CSS动画 CSS动画允许大多数HTML元素的动画,而无需使用JavaScript或Flash! 动画浏览器支持 ...

  • 2018-06-13

    Css动画: css3动画主要包括Transform、Transition、Animation 区别 transi...

  • 2018-08-15

    CSS动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规...

  • CSS3 动画

    动画属性 动画(animation)是CSS3新增的属性,动画属性可以为元素创建动画,CSS3以前在网页上实现动画...

网友评论

      本文标题:CSS动画

      本文链接:https://www.haomeiwen.com/subject/alqabftx.html