写在前面，转眼就2020年了。不知道小伙伴们今年学了css3动画了吗？说起CSS动画是一件很尴尬的事情，一方面是因为公司用CSS动画比较少，另一方面大部分开发者都习惯用JavaScript来做动画，所以很多程序员比较排斥学习CSS动画（至少我是），但是一个不懂CSS动画的前端工程师，不能称为精通CSS3。事实上，当你真正学习CSS动画时，你会被它的魅力所吸引，可以减少代码量，提高性能。话不多说，快来跟我一起学习今天的转职吧！transition语法值说明transition-duration过渡效果需要指定多少秒或多少毫秒完成transition-property指定CSS属性名称，transitioneffecttransition-timing-function指定过渡效果的速度曲线transition-delay定义什么时候transitioneffectstartsTransition翻译成中文是过渡的意思。顾名思义就是专门做过渡动画的，比如放大缩小，隐藏显示等等，一起来学习一下它的语法吧。transition-duration：指定过渡效果需要多少秒或多少毫秒完成div{width:100px;高度：100px；边界半径：50%；背景：#f40；transition-duration:1s;}div:hover{height:150px;width:150px;}这是transition最基本的用法，transition-duration是动画执行需要的时间，这段代码的意思是当鼠标移入时，div的宽高会变成150pxtransition-property：指定CSS属性名称，过渡效果div{width:100px;高度：100px；边界半径：50%；背景：#f40；过渡持续时间：1s；过渡属性：宽度；}div：悬停{高度：150px；width:150px;}这里transition-property的值只有width，也就是说width只加了动画，所以才会显示这个效果。同样，如果改成height，那么动画只有变高了才会动画。我们发现第一种情况我们没有写transition-property，而是同时改变了case中的width和height属性，那是因为transition-property的默认值是all，只要这个属性是没有写，所有的变化都会执行动画。transition-timing-function：指定转场效果的速度曲线div{width:100px;高度：50px；背景：#f40；过渡持续时间：2s；transition-timing-function:ease-in-out;}div:hover{width:250px;}transition-timing-function的作用是改变每一帧动画的速度。这里的transition-timing-function只展示了ease-in-out值为ease-in-out的动画效果，可以理解为slow-fast-slow。其他的就不展示了，大家可以参考下表了解。该值描述速度线性（默认属性）指定过渡效果以相同速度开始和结束（等于cubic-bezier(0,0,1,1)）。Uniformease指定开始缓慢，然后变得更快，然后缓慢结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。fast-slow-slowease-in指定过渡应以慢速开始（等于cubic-bezier(0.42,0,1,1)）。Fast-fastease-out指定以慢速结束的过渡（等于cubic-bezier(0,0,0.58,1)）。slow-slowease-in-out指定过渡应该以慢速开始和结束（等于cubic-bezier(0.42,0,0.58,1)）。slow-fast-slowcubic-bezier(n,n,n,n)在cubic-bezier函数中定义它自己的值。可能的值是0到1之间的数值。自定义transition-delay：定义过渡效果什么时候开始div{width:100px;高度：100px；边界半径：50%；背景：#f40；过渡持续时间：1s；transition-delay:1s;}div:hover{height:150px;width:150px;}这里transition-delay的值为1s，表示动画延迟一秒后执行。今天我们一共学习了四个属性值，都属于transition属性。这里是transition中属性值的缩写。transition:propertydurationtiming-functiondelay;div{transition:all1sease-in-out2s;}那么这里的意思就是把所有的属性加到持续一秒的动画中，慢进慢出，开始两秒后执行。结束语经过上面的学习，相信你对transition的用法有了初步的了解。Transition非常适合转场，但是单靠它并不能做出一些很酷的动画。我会在下一篇文章（Animation）中继续给大家讲解动画，translate（运动）和transform（变形），跟随我的脚步，在2020年之前和我一起掌握css动画！结语以上就是本文的全部内容，如有不妥之处还望指正。感谢阅读，觉得有用请点赞/转发。前端深入系列是一个踩坑系列。是对自己在工作学习中遇到的问题和踩过的坑的探索和总结。在此记录和分享，也是对自己技术的反思和质疑。.前路漫漫，陷阱不断。前端深入系列持续更新中……以上是2019-10-16。
