Css开发：动画效果实现

一、动画实例

　　1、平移效果

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <style>
        .test {
            width: 5px;
            height: 5px;
            background: #000000;
            border-radius: 5px;
            animation: move 1s linear;
        }
        @keyframes move{
            100%{
                margin-left: 50px; 
            }
        }
    </style>
</head>
<body>
    <div class="test"></div>
</body>
</html>

　　在div的class类样式中添加animation属性则为添加动画效果，对应值为动画、维持/消耗时间以及一些附属的属性。

　　如上代码中，通过@keyframes定义动画效果，move这个效果则是距离左边距50像素，搭配限制的时间后则为1秒内完成从左侧无边距到左边距50的变化，这个过程就是动画效果的实现。

　　附属属性中的linear代表匀速移动，其他类似的速度相关属性还有ease（默认，先慢开始再加快最后变慢结束）、ease-in（先慢开始然后加快结束）、ease-out（先快开始然后变慢结束）、ease-in-out（先慢后快后慢，和ease类似）。

二、动画属性详解

　　1、animation-name：

　　动画名称，添加动画效果时该属性必要的，默认为none，即无动画效果。

　　2、animation-duration：

　　执行周期，添加动画效果时该属性也是必要的，默认为0，即无动画效果。

　　3、animation-delay：

　　延迟时间，添加动画效果时该属性为动画播放前的延迟时间，它的值可以是秒、毫秒，默认为0，即不进行延迟，立即开始动画。

　　4、animation-timing-function：

　　执行速度，它的值是贝塞尔曲线，默认值是ease。

　　linear代表匀速移动，ease（默认，先慢开始再加快最后变慢结束）、ease-in（先慢开始然后加快结束）、ease-out（先快开始然后变慢结束）、ease-in-out（先慢后快后慢，和ease类似）。

　　5、animation-iteration-count：

　　循环次数，直接写数字可以自定义播放动画的次数，或者使用infinite来设置无限循环播放。

　　6、animation-fill-mode：

　　定义样式，即动画结束以后或者未开始前的样式，默认为none，就不会额外添加样式，动画执行后恢复到原本的样子。

　　forwards表示动画结束后样式定格，即取动画在100%进度时的样式，不会还原到动画执行前的样式。例如在鼠标悬浮到某个元素上需要放大显示时，可以设置成动画结束后保留样式，否则就会在放大结束后回退到放大前的大小。

　　backwards表示动画开始前预置样式，即取动画在0%进度时的样式（通常搭配animation-delay的延迟效果使用，在延迟期间显示预置的样式）。

　　both表示forwards和backwards都生效。

　　7、animation-direction：

　　轮流反向播放，默认值为normal，正常播放。

　　reverse表示动画反向播放。alternate表示动画奇数次正向播放，偶数次反向播放。alternate-reverse表示动画在奇数次反向播放，偶数次正向播放。

三、浏览器兼容性

　　IE还是一如既往的难以兼容，老版本肯定是不行了，animation-fill-mode这样的属性到IE10才兼容。

　　其他浏览器如Firefox、Opera等添加动画效果时可以通过animation和@keyframes来搭配使用，Safari 、 Chrome需要使用-webkit-animation和@-webkit-keyframes

　　

posted @ 2022-07-24 14:30  我命倾尘  阅读(415)  评论(0)  编辑  收藏  举报