Css开发：动画效果实现

2022-07-24 14:33:58 阅读：142 来源： 互联网

一、动画实例

　　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

标签：动画,效果,样式,ease,animation,播放,Css
来源： https://www.cnblogs.com/guobin-/p/16514477.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Css开发：动画效果实现