正文

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

lonelyxmas  2022-02-12  704

关键词：

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

写在前面

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

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

话不多说，马上和我一起去学习今天的主角transition吧！

transition 语法

值	描述
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-property	指定CSS属性的name，transition效果
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

transition翻译成中文是过渡的意思，顾名思义，它就是专门做过渡动画的，比如一些放大缩小，隐藏显示等，下面我们一起来学习一下他的语法。

transition-duration：transition效果需要指定多少秒或毫秒才能完成

div{
    width:100px;
    height:100px;
    border-radius: 50%;
    background:#f40;
    transition-duration:1s;
}
div:hover{
    height:150px;	
    width:150px;
}
复制代码

这是transition最基本的用法，transition-duration为动画执行所需的时间，这段代码的意思就是鼠标移入，div的宽高就会都变成150px

transition-property：指定CSS属性的name，transition效果

div{
    width:100px;
    height:100px;
    border-radius: 50%;
    background:#f40;
    transition-duration:1s;
    transition-property:width;
}
div:hover{
    height:150px;	
    width:150px;
}
复制代码

这里transition-property值仅为width，意思是只给width加动画，所以会呈现这种效果，同样如果换成了height，那么将会是变高才有动画。

我们发现，第一个案例我们并没有写transition-property，但是案例中width和height属性是同时变化的，那是因为transition-property的默认值为all，只要不写这个属性，那就是全部变化都会执行动画。

transition-timing-function：指定transition效果的转速曲线

div{
    width:100px;
    height:50px;
    background:#f40;
    transition-duration:2s;
    transition-timing-function:ease-in-out;
}
div:hover{
    width:250px;
}
复制代码

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

值	描述	速度
linear（默认属性）	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。	匀速
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。	快-慢-慢
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。	快-快
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。	慢-慢
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。	慢-快-慢
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。	自定义

transition-delay：定义transition效果开始的时候

div{
    width:100px;
    height:100px;
    border-radius: 50%;
    background:#f40;
    transition-duration:1s;
    transition-delay:1s;
}
div:hover{
    height:150px;	
    width:150px;
}
复制代码

这里transition-delay的值为1s，意思是动画将在延迟一秒后执行。

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

transition: property duration timing-function delay;

div{
    transition:all 1s ease-in-out 2s;
}
复制代码

那么这里的意思就是所有属性都加入持续一秒，缓进缓出的动画，并在两秒钟后开始执行。

结论

经过以上的学习，相信你已经初步了解了transition的用法，transition用来过渡再好不过了，但是仅靠它做不了一些炫酷的动画，我将在接下来的文章继续为你讲解animation（动画）、translate（移动）以及transform（变形），跟进我的脚步吧，跟我一起在2020年前掌握css动画！

结语

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

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

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

前端路漫，踩坑不断。

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

以上2019-10-16。

前端talkkingcss系列——css深入理解之float浮动

...然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有"刨根问底"的精神，这样在出现一些问题的时候才不至于"手慌脚乱"！因此，今天就特别整理和总结一下float属性。1.float介绍CSS世界中的float属性是一... 查看详情

css移动前端开发之viewport的深入理解

...s.com/2050/p/3877280.html 版权归作者所有感谢原作者移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了查看详情

前端深入之css篇|link和@import到底有什么区别？

写在前面在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。而在我们学习之初的外部样式表都是用link引入的，但是当后来我们学习的逐渐深入，发现@import也可以引入样式。那么同样是引入外... 查看详情

朱朝兵《web前端开发之html5+css3快速入门》课程资料在线学习

《Web前端开发之HTML5+CSS3快速入门》【课程简介】本课程由一直专注前端技术与Discuz模板设计与制作！DZ起点网创始人朱朝兵出品，通过本课程学习，即可掌握html5的基本结构，还可以熟悉掌握CSS3新增的属性，并可以独立完成一些... 查看详情

css设计彻底研究深入理解盒子模型

第三章深入理解盒子模型　　盒子模型是CSS控制页面的基础。需要清楚“盒子”的含义是什么，以及盒子的组成。此外，应该理解DOM的基本概念，以及DOM树是如何与一个HTML文档对应的，在此基础上充分理解“标准流&rdqu... 查看详情

网络爬虫入门04彻底掌握beautifulsoup的css选择器

【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器广东职业技术学院欧浩源2017-10-211、引言目前，除了官方文档之外，市面上及网络详细介绍BeautifulSoup使用的技术书籍和博客软文并不多，而在这仅有的资料中介绍CSS... 查看详情

学习web前端开发，需要掌握哪些知识

...（AJAX、浏览器缓存、JS对象高级、ES6、JQuery）第四阶段：前端主流框架（前端工程化、AugularJS、VueJS、ReactNative、微信小程序）参考技术A您好，学习web前端开发需要掌握的有8个阶段：阶段1.前端核心基础HTML+_CSS核心、JavaScript基础... 查看详情

零基础学前端开发之css3深入选择器(代码片段)

知识点：1.并集选择器（多个）2.交集选择器（组合选择器）3.子代选择器4.后代选择器5.属性选择器6.结构伪类选择器7.伪元素选择器8.案例作业1.并集选择器语法：选择器1，选择器2，选择器n共同的... 查看详情

前端之div+css布局

...习后端，可是随着学习的深入和项目的进行，越来越发现前端知识的欠缺，之前也随着视频看过，随着时间的流逝，具体的应用也随之忘记了。而现在开始自己练习项目，发现前端知识也不可逃避，之前总觉的前端是记忆的东西... 查看详情

深入浅出flask(23)：h-ui前端框架的css动画

动画一直是人们关注的焦点，因为人的眼睛对于动的物体感觉性高很多，这是因为人是几万年的基因改造过程中的选择，由于动的东西对人类威胁是最大的，比如飞奔的大老虎，又者山上滚下来的大石头。因此动画显示一直是人... 查看详情

零基础学前端之css3高级特效(代码片段)

css3高级特效1、本章目标掌握2D转换对元素进行移动、旋转、缩放和倾斜掌握在3D空间中改变元素的形状、位置和大小2、2D转换方法移动：translate()旋转：rotate()缩放：scale()倾斜：skew()2D转换属性：transform作用... 查看详情

零基础学前端之css3高级特效(代码片段)

css之深入理解overflow

主要是对大神讲解的视频的总结，我自己是写不出来什么东东的查看详情

web前端需要学啥？

这里整理了一份web前端学习路线的思维导图，需要掌握和学习的内容如下：第一阶段：专业核心基础阶段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术... 查看详情

零基础学习前端开发要怎么开始

前端开发必学的技术都有哪些？

前端开发必学的技术有哪些这里给大家整理了一份系统全面的前端学习路线，主要掌握以下技术：第一阶段：专业核心基础阶段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布... 查看详情

css深入理解之float（html/css）

float的设计初衷仅仅是：为了文字环绕效果 float的包裹与破坏包裹：收缩、坚挺、隔绝（BFC）破坏：父元素高度塌陷<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>Layout</title><style>.box{border:1pxso 查看详情

css深入理解之margin

由于在页面的任何地方嵌套一个div，对原来的页面不会产生任何的影响，这就是父子重叠产生的原因 margin：auto用来分配剩余空间的大小的，只有在默认的时候能够填充满才能进行分配，如下就不能垂直居中查看详情