日志

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

 来源    2019-10-21    1  

写在前面

马上就2020年了,不知道小伙伴们今年学习了css3动画了吗?

说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量、提高性能。

上一篇文章我们已经一起学习了transition 的使用,如果有不了解的同学可以查看我的上一篇文章。

话不多说,马上和我一起去学习今天的主角animation吧!

animation 语法

描述
@keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用
animation-name 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义
animation-duration 检索或设置对象动画的持续时间
animation-timing-function 检索或设置对象动画的过渡类型
animation-delay 检索或设置对象动画的延迟时间
animation-iteration-count 检索或设置对象动画的循环次数
animation-direction 检索或设置对象动画在循环中是否反向运动
animation-play-state 检索或设置对象动画的状态

animation翻译成中文是动画的意思,熟练运用之后你可以用它来做各种各样炫酷的动画。

@keyframes:定义一个动画,定义的动画名称用来被animation-name所使用。

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation:mymove 2s;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}    
    50%   {width:100px;height:100px;}    
    100%   {width:50px;height:50px;}
}

@keyframes主要是做关键帧动画的,每个@keyframes后面都要跟一个名字,事例中使用了mymove作为帧动画的名字,然后可以在样式内对关键帧添加样式,然后根据关键帧 @keyframes就能自动形成流畅的动画了。

animation-name:检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}    
    50%   {width:100px;height:100px;}    
    100%   {width:50px;height:50px;}
}

animation-name使用之前,我们已经定义了一个名为mymove的帧动画,这里把帧动画的名字作为了animation-name的值,含义是当前元素将执行所设置的帧动画。

animation-duration:检索或设置对象动画的持续时间

继续看上一个案例,仅仅有帧动画和需要执行的动画名称是不足以形成动画的,我们还需要设置一个动画执行所需要的时间,这里就用到了animation-duration属性,所以上一案例所展示的时间为两秒钟执行一次。

animation-timing-function:检索或设置对象动画的过渡类型

div{
    width:100px;
    height:50px;
    background:#f40;
    position:relative;
    animation-name:mymove;
    animation-duration:3s;
    animation-timing-function:ease-in-out;
}
@keyframes mymove{
    0% {left:0px;}
    100% {left:300px;}
}

animation-timing-function的作用就是改变动画在每一帧的快慢。这里transition-timing-function仅展示值为ease-in-out的动画效果,可以理解为慢-快-慢。其他的不做展示,可以参考下表进行理解。

描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay:检索或设置对象动画的延迟时间

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
    animation-delay:2s;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}    
    50%   {width:100px;height:100px;}    
    100%   {width:50px;height:50px;}
}

这里animation-delay的值为2s,意思是动画将在延迟两秒秒后延迟执行。

animation-iteration-count:检索或设置对象动画的循环次数

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}    
    50%   {width:100px;height:100px;}    
    100%   {width:50px;height:50px;}
}

这里animation-iteration-count的值为infinite,意思是动画将会无限次的执行,这也就达到了循环的效果,当然你还可以给它具体的数值,当执行你设置的次数后它会自动停止。

animation-direction:检索或设置对象动画在循环中是否反向运动

div{
    width:100px;
    height:50px;
    background:#f40;
    position:relative;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}

@keyframes mymove{
    0% {left:0px;}
    100% {left:300px;}
}

这里animation-direction的值为alternate,代表动画将会来回的反复执行,他还有其它属性,在下表给出供小伙伴们自己尝试。

描述
normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
alternate-reverse 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

animation-play-state:检索或设置对象动画的状态

<style>
div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
}
@keyframes mymove{
    0%   {width:50px;height:50px;}    
    50%   {width:100px;height:100px;}    
    100%   {width:50px;height:50px;}
}
</style>
<body>
    <button onclick="pause()">暂停</button>
    <button onclick="run()">恢复</button>
    <div></div>
</body>

function pause(){
    document.querySelector('div').style.animationPlayState="paused"
}
function run(){
    document.querySelector('div').style.animationPlayState="running"
}

animation-play-state的默认值为running,就是动画执行的意思,在实际应用中我们经常使用js来操作这个属性,从而控制动画的播放和暂停。


今天我们一共学习了八个属性值,他们都是属于animation属性的,这里给出属性值在animation中的简写方式。

animation: name duration timing-function delay iteration-count direction play-state;

div{
    animation:mymove 2s ease-in-out 3s infinite alternate running;
}

那么这里的意思就是mymove动画将在三秒钟后开始,以两秒一个循环慢-快-慢方式,进行动画的展示,并且每次动画过后都会向相反方向执行动画。

结论

经过以上的学习,相信你已经初步了解了animation的用法,随着你对animation的深入理解,是可以做一些有创造性的动画的,你可以看看自己之前用js写的各种动画,尝试着用我们两篇文章所学的内容进行修改,相信你一定会对这两个属性有更深的理解。

但是现在我们只是学会了过渡和动画,我们现在还不能对图形进行一系列的不规则操作,而transform(变形)就是来操作改变成特殊图形的,我将在接下来的文章继续为你讲解translate(移动)以及transform(变形),跟进我的脚步吧,跟我一起在2020年前掌握css动画!

结语

以上就是本文章的全部内容了,如果有不正确的地方欢迎指正。

感谢您的阅读,如果感觉有用不妨点赞/转发。

前端深入系列是一个踩坑系列,是由我本人对工作和学习中所遇到的问题和踩过的坑的一个探索与总结,在此记录分享出去,同时也是对自我技能的一个反思和追问。

前端路漫,踩坑不断。

前端深入系列持续更新中……

以上2019-10-21。

前端深入之css篇丨2020年前,彻底掌握css动画transition
日志写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...
后端码农谈前端(CSS篇)第五课:CSS样式
日志一.背景: CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果. 1.背景色 可以使用 background-color 属性为元素设置背景色.这个属性接受任何合法的颜色值. 例如: ...
前端深入之css篇|你真的了解“权重”吗?
日志写在前面 权重这个概念,相信对许多进行过前端开发的小伙伴来说肯定并不陌生,有时候一个样式添加不上,我们就会一个 !important 怼上去,一切就好像迎刃而解了.但还有的时候,!important也 ...
BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
日志很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...
前端高频面试题 CSS篇
日志通过从网上看到的面经,总结的一些高频的前端CSS面试题,有很多不会,于是找资料,并通过代码实现,自己提供了一些参考答案. 目录 1.怎样会产生浮动? 2.如何清除浮动? 3.盒子模型,以及IE和其他浏 ...
前端开发第2篇:CSS
日志鸡血 样式的属性多达几千个,但别担心,按照80-20原则,常用的也就几十个,你完全可以掌握它. Css初识 HTML的诞生  早期只有HTML的时候为了让HTML更美观一点,当时页面的开发者会把颜色写 ...
后端码农谈前端(CSS篇)第八课:继承与层叠
日志一.继承 继承:所谓CSS样式继承,就是子元素应用父元素的规则声明.(由这一特性,可将CSS属性分为可继承属性和非可继承属性.)可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性. 哪些属 ...
后端码农谈前端(CSS篇)第七课:定位与浮动
日志一.定位: 1.定位的理解 (1)相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于&qu ...
后端码农谈前端(CSS篇)第四课:选择器补充(伪类与伪元素)
日志一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接 ...
后端码农谈前端(CSS篇)第三课:选择器
日志一.选择器 1.ID选择器: 语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号.请看下面的规则: *#intro {font-weight:bold;}与类选择器一样,ID 选择器中 ...
后端码农谈前端(CSS篇)第二课:CSS的5个来源
日志0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...
BAT及各大互联网公司2014前端笔试面试题--Html,Css篇(昨天有个群友表示写的简单了点,然后我无情的把他的抄了一遍)
日志某个群友 http://www.cnblogs.com/coco1s/   很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础 ...
[Web 前端] CSS篇之3. 如何保持浮层水平垂直居中
日志原文链接](https://www.cnblogs.com/yaliu/p/5190957.html)  浮层水平垂直居中方法 (一)利用绝对定位与transform <div class=&q ...
[Web 前端] CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法
日志cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...
前端面试知识点锦集02(CSS篇)
日志目录 二.CSS部分 1.解释一下CSS的盒子模型? 2.请你说说CSS选择器的类型有哪些,并举几个例子说明其用法? 3.请你说说CSS有什么特殊性?(优先级.计算特殊值) 4.要动态改变层中内容可以 ...
BAT及各大互联网公司前端笔试面试题--Html,Css篇
日志      注意 转载须保留原文链接(https://www.cnblogs.com/wzhiq896/p/5931347.html )作者:wangwen896         整理分享出来希望更多 ...
web前端面试试题总结---css篇
日志CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...
(转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
日志BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有 ...
前端常用面试题目及答案-HTML&CSS篇
日志1. 行内元素和块级元素有哪些? 行内元素: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <a ...
干货分享 前端面试知识点锦集02(CSS篇)——附答案
日志二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding ...