CSS篇之动画（2）

animation-name（自定义动画）

name为动画名称。不要用中文，尽量用与动画相关的名称。元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义。简单理解@keyframes它就是关联，如果你不用@kedyframes里面的效果套用到你要的动画里面，你的动画就是一个不会动的图片。

div{
    -webkit-animation-name：fromofright；（加了兼容前缀只适用）
        ainmation-name：fromofright；
}

keyframes（关键帧）

关键帧相当于一个会运动的画面它们其实是有一个一个画面不停地在播放的速度形成的一个画面给人来动感的一组图片。而关键帧就是锁定这些图片的重要属性。

帧数越多画面越流畅。

@-webkit-keyframes 动画名{
        from{
            left：0px；
}
to{
        left：400px；
}
}

百分号写法

@-webkit-keyframes 动画名{
    0%{
    left：0px；
}
50%{
        left：100px；
}
100%{
left：0px；
}
}

注意百分号的写法开头开始关键帧必须为0%，结束必须为100%

animation-time（动画时间）

动画时间理解为一个完整动画所用的时长是多少这就是这个动画的时间。

div{
        -webkit-animation-time：1s；
}

结合上面三个知识点我做出了一个普通图片位移的效果然后回归到原位的效果。

正常动画

附上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正常动画</title>
        <style type="text/css">
            .img{
                width: 50px;
                height: 50px;
                background: green;
                border-radius: 6px;
                -webkit-animation-name:yidong ;
                -webkit-animation-duration:5s;
                -webkit-animation-iteration-count: 99;/*循环播放*/
            }

            @-webkit-keyframes yidong{
                from{
                    margin-left:0px;
                }
                to{
                    margin-left:200px
                }
            }
        </style>
    </head>
    <body>
        <div class="img"></div>
    </body>
</html>

animation-timing-function（动画过渡速度）

ease： 逐渐变慢，（默认属性）等于ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

正常动画

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正常动画</title>
        <style type="text/css">
            .img2{
                width: 50px;
                height: 50px;
                background: green;
                border-radius: 6px;
                -webkit-animation-name:yidong ;
                -webkit-animation-duration:4s;
                -webkit-animation-iteration-count: 99;/*循环播放*/
            }

            @-webkit-keyframes yidong{
                from{
                    margin-left:0px;
                }
                to{
                    margin-left:350px
                }
            }
        </style>
    </head>
    <body>
        <div class="img2"></div>
    </body>
</html>

linear ：匀速，linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)。

线性过渡

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>线性过渡</title>
        <style type="text/css">
            .img3{
                width: 50px;
                height: 50px;
                background: yellow;
                border-radius: 5px;
                -webkit-animation-name:xianxing;
                -webkit-animation-timing-function: linear;
                -webkit-animation-duration: 4s;
                -webkit-animation-iteration-count: 99;/*循环播放*/
            }

            @-webkit-keyframes xianxing{
                from{
                    margin-left:0px ;
                }
                to{
                    margin-left:350px ;
                }
            }
        </style>
    </head>
    <body>
        <div class="img3"></div>
    </body>
</html>

ease-in ：加速，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)。

加速动画

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>加速动画</title>
        <style type="text/css">
            .img4{
                width:50px;
                height:50px;
                background: dodgerblue;
                border-radius: 5px;
                -webkit-animation-name: jiasu;
                -webkit-animation-timing-function:ease-in;
                -webkit-animation-duration: 4s;
                -webkit-animation-iteration-count: 99;/*循环播放*/
            }

            @-webkit-keyframes jiasu{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: 350px;
                }
            }
        </style>
    </head>
    <body>
        <div class="img4"></div>
    </body>
</html>

ease-out ：减速，ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)。

减速

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>减速</title>
        <style type="text/css">
            .img5{
                width: 50px;
                height: 50px;
                background: lightcoral;
                border-radius: 5px;
                -webkit-animation-name:jiansu;
                -webkit-animation-timing-function: ease-out;
                -webkit-animation-duration: 4s;
                -webkit-animation-iteration-count: 99;/*循环播放*/
            }

            @-webkit-keyframes jiansu{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: 350px;
                }
            }
        </style>
    </head>
    <body>
        <div class="img5"></div>
    </body>
</html>

ease-in-out：先加速后减速，ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)。

先加速后减速

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>先加速后减速</title>
        <style type="text/css">
            .img6{
                width: 50px;
                height: 50px;
                background: gold;
                border-radius: 5px;
                -webkit-animation-name:xian ;
                -webkit-animation-timing-function: ease-in-out ;
                -webkit-animation-duration: 4s;
                -webkit-animation-iteration-count: 99;/*循环播放*/
            }

            @-webkit-keyframes xian{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: 350px;
                }
            }
        </style>
    </head>
    <body>
        <div class="img6"></div>
    </body>
</html>

animation-delay（动画延迟时间）

本来是一个1秒钟播放的动画，我想弄成1秒后再播放，这就是动画延迟。

div{
        -webkit-animation-delay：1s / 可以添加动画过渡速度的值；
}

继续用上面动画过渡速度例子添加延迟播放时间（请刷新观看）

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .img7{
                width: 50px;
                height: 50px;
                background: green;
                border-radius: 5px;
                -webkit-animation-name: yanchi;
                -webkit-animation-duration: 4s;
                -webkit-animation-delay: 2s;
            }

            @-webkit-keyframes yanchi{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left:350px ;
                }
            }
        </style>
    </head>
    <body>
        <div class="img7"></div>
    </body>
</html>

animation-ieration-count（动画播放次数）

写法：animation-ieration-count：次数用数字/infinite(循环播放播放N次)

例子都用到了此属性

animation-direction（动画顺序）

设置动画播放方向

normal：正常方向（默认）

reverse：反方向运行

alternate：动画线正常运行在反方向运行，并持续交替运行

alternate-reverse：动画先反方向运行再正方向运行，并持续交替运行

div{
    -webkit-animation-direction：normal；
        animation-direction：normal；
}

例子

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .one{
                width: 100px;
                height: 100px;
                background: yellow;
                margin: 5px;
                -webkit-animation-name: leftofright2;
                -webkit-animation-duration: 2s;
                -webkit-animation-iteration-count: infinite;

            }
            /*可以直接用于元素属性里面*/
            .reverse{
                -webkit-animation-direction: reverse;
                background: black;
            }

            .alternate{
                -webkit-animation-direction: alternate;
                background: blue;
            }

            .alternate-reverse{
                -webkit-animation-direction: alternate-reverse;
                background: blueviolet;
            }

            @-webkit-keyframes leftofright2{
                from{
                    margin-left:0 ;
                }
                to{
                    margin-left:400px ;
                }
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="one reverse"></div>
        <div class="one alternate"></div>
        <div class="one alternate-reverse"></div>
    </body>
</html>

animation-play-state（动画的状态）

animation-play-state：running|paused

running：运动

paused：暂停

div：hover{
    -webkit-animation-play-state：paused；
animation-play-state：paused；
}

鼠标移动到背景上将停止动画播放

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .yi{
                width: 100px;
                height: 100px;
                background: bisque;
                margin: 5px;
                -webkit-animation-name: dong;
                -webkit-animation-duration: 2s;
                -webkit-animation-iteration-count: infinite;
            }

            .yi:hover{
                -webkit-animation-play-state: paused;
            }

            @-webkit-keyframes dong{
                from{
                    margin-left:0 ;
                }
                to{
                    margin-left:400px ;
                }
            }
        </style>
    </head>
    <body>
        <div class="yi"></div>
    </body>
</html>

animation-fill-mode（动画时间之外的状态=动画播完后动画显示是怎么样）

animation-fill-mode：none|forwards|backwards|both

none：默认值。不设置对象动画之外的状态。

forwards：设置对象状态为动画结束时的状态

backwards：设置对象状态为动画开始时的状态

both：设置对象状态为动画结束后开始的状态

div{
    -webkit-animation-fill-mode：both；
         animation-fill-mode：both；
}

animation（动画符合属性）

animation：[animation-name] | [animation-duration] | [animation-timing-function] | [animation-delay] | [animation-iteraion-count]|[animation-direction]|<single-animation-fill-mode>|<single-animation-play-state>[,*]

div{

-webkit-animation:动画名字  动画时长  动画过渡速度  动画时间外的状态

}

时间： 2024-10-04 18:36:42

CSS篇之动画（2）的相关文章

前端深入之css篇丨2020年前，彻底掌握css动画【transition】

原文:前端深入之css篇丨2020年前,彻底掌握css动画[transition] 写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 话不多说,马上

前端深入之css篇丨初探【transform】，手把手带你实现1024程序员节动画

原文:前端深入之css篇丨初探[transform],手把手带你实现1024程序员节动画 写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 值此10

前端深入之css篇丨2020年前，彻底掌握css动画【animation】

原文:前端深入之css篇丨2020年前,彻底掌握css动画[animation] 写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 上一篇文章我们已

移动端 h5开发相关内容总结——CSS篇

移动端 h5开发相关内容总结——CSS篇 标签: css移动 2016-01-06 15:59 5536人阅读 评论(3) 收藏 举报  分类: HTML+CSS(17)  版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=n

CSS图片翻转动画技术详解

因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,IE9完全不支持CSS动画. CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出就连皮克斯动画制作公司也会赞叹的漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家介绍如何创建这种效果. 简单说明:这并不

BAT及各大互联网公司2014前端笔试面试题：HTML/CSS篇

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 2014/08/03 · Web前端, 开发 · CSS, HTML, 技术面试 分享到: 188 MongoDB集群之分片技术应用 Hello,移动WEB Linux权限管理之特殊权限 Android高级特效-索引 原文出处: Ico_Coco 的博客(@CHoK__Coco_mAm)   欢迎分享原创到伯乐头条 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇【转】

Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 答案:<!DOCTYPE> 声明位于文档中的最前

面试题2：BAT及各大互联网公司2014前端笔试面试题：HTML/CSS篇

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这

web移动开发最佳实践之 css篇

web移动开发最佳实践之 css篇 一.css概述 css即层叠样式表(Cascading Style Sheets),它的作用主要是控制页面元素的样式,包括布局.颜色.字体.字号.空白.边框.属性等等.css的出现使得html的内容和样式分离,极大的提高了工作效率. 目前最新的标准是css3,下面几节将介绍在使用css过程中应遵循的最佳实践方案. 二.使用高效的css选择器 欲创建一个高效的web应用,你要了解浏览器是如何读取你的web页面并呈现出来的.当浏览器读取你的html文档时,它首先对