html5动画

╰半夏微凉° 2022-07-20 15:12 183阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .trans_list{
                width: 5%;
                height: 65px;
                margin:10px 0;
                background-color: #486AAA;
                color: #fff;
                text-align: center;
            }
    
            .test{
                width: 100px;
                height: 100px;
                background: red;
                transition: width 0.5s ease;
            }
    
            .test:hover{
                width: 300px;
            }
    
            .transBox:hover .trans_list{
                margin-left:50%;
                border-radius: 25px;
                transform:rotate(360deg);
            }
    
            .ease{
                transition:all 2s ease;
            }
            .ease_in{
                transition:all 2s ease-in;
            }
            .ease_out{
                transition:all 2s ease-out;
            }
            .ease_in_out{
                transition:all 2s ease-in-out;
            }
            .linear{
                transition:all 2s linear;
            }
            .cubic-bezier{
                transition:all 2s cubic-bezier(0.2,0.2,0.2,0.2);
            }
        </style>
    </head>
    <body>
    <h3>CSS3动画效果</h3>
    <ul>
        <p>transitions动画：过渡效果，从一种样式变成另一种效果</p>
        <p>transitions过渡属性如下</p>
        <li>transition：简写属性，用于在一个属性中，设置四个过渡属性，复合属性，可以同时定义transition-property，transition-duration，transition-timing-function，transition-delay，语法：transition：property duration transition-timing-function</li>
        <li>transition-property：规定过渡的CSS属性名称，值：none,all,property，none:没有属性会获得过渡效果，all:所有属性会获得过渡效果，property:规定获得过渡效果的CSS属性名称，列表以逗号分隔</li>
        <li>transition-duration：定义过渡效果花费的时间。默认是0，注意一定要指定时间，否则是没有过渡效果特效的</li>
        <li>transition-timing-function：定义过渡效果的效果，值;linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)，linear:规定以相同时间开始到结束的过渡效果，ease:规定慢速开始，到快速，然后慢速结束的过渡效果，ease-in:规定以慢速开始，
        ease-out:规定以慢速结束的过渡效果，ease-in-out:规定以慢速开始和结束的过渡效果，cubic-bezier可以自定义自己的值0到1</li>
        <li>transition-delay：定义过渡动画的延迟时间，以秒或者毫秒为单位，transition-delay：time，time指定多少秒或者毫秒之前要等待切换效果开始</li>
    </ul>
    <h3>animations动画</h3>
    <ul>
        <p>除了用transition来实现动画效果，也可以用animations来实现复杂的动画效果，但是首先要了解@keyframes，@keyframes规则内
        指定一个样式和动画，将逐渐由旧的样式变成新的样式，对多个关键帧来控制动画，可以更酷炫</p>
        <p>创建animations动画，用百分比来规划变化发生的时间，0%动画开始时间，100%动画结束时间，例如：
            @keyframes mydonghua{
                0% {background: red}
                50% {background: blue}
                100% {background: black}
            }
        </p>
        <li>animation-name:规定@keyframes动画名称，animation-name:keyframename | none</li>
        <li>animation-duration：动画一个周期耗费的时间，秒或毫秒，animation-duration: time</li>
        <li>animation-time-function：规定动画时间曲率，默认是ease，值;linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n),step-start,step-end，step-start:马上跳转到动画结束状态，step-end:保持动画开始状态，指导动画执行时间结束。跳至动画结束状态</li>
        <li>animation-delay:规定动画何时开始，默认0</li>
        <li>animation-iteration-count：规定动画播放的次数，animation-iteration-count：n | infinite无数次播放</li>
        <li>animation-direction：规定动画下一周期是否逆向的，默认normal，值：normal,reverse,alternate,alternate-reverse,initial，reverse反向播放，alternate基数次的时候正向播放，偶数次的时候反向播放</li>
        <li>animation-play-state：规定动画是否运行或者暂停，默认running，值：paused | running</li>
        <li>animation：所有动画的简写属性</li>
    </ul>
    <div class="transBox">
        <div class="test"></div>
        <div class="trans_list ease">ease</div>
        <div class="trans_list ease_in">ease-in</div>
        <div class="trans_list ease_out">ease-out</div>
        <div class="trans_list ease_in_out">ease-in-out</div>
        <div class="trans_list linear">linear</div>
        <div class="trans_list cubic-bezier">cubic-bezier</div>
    </div>
    </body>
    </html>