html5动画

最新推荐文章于 2021-02-23 10:27:33 发布

我叫干脆面

最新推荐文章于 2021-02-23 10:27:33 发布

阅读量266

点赞数 1

分类专栏： html5

本文链接：https://blog.csdn.net/sinat_26918145/article/details/51859238

版权

html5 专栏收录该内容

6 篇文章 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>

我叫干脆面

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5动画

.trans_list{ width: 5%; height: 65px; margin:10px 0; background-color: #486AAA; color: #fff; text-align: center; }
复制链接

扫一扫