这篇文章主要讲解了“css怎么实现动画”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css怎么实现动画”吧!
随着业务对前端的需求越来越多,作为前端三大法宝之一的css也越变越复杂。给初学的同学们带来了一定的压力。css具体到每一个属性也都没有多复杂,主要问题在于知识点比较多。好不容易把主要知识点学完了,一看网上的题,或者是一看大师们写的css的书,又被淹没到新的海洋中。
其实人类的大脑不善于记忆零散的知识点,但是如果有一条逻辑线能够将这些知识串联起来,就能大大方便大脑的记忆和搜索。这个线索要有逻辑,最好还有趣。
刚好,css的动画就是这样一条有趣的线索,可以在动画的变化中理解css属性。
CSS动画快速扫盲
在串起其它属性之前,我们先理解下动画。
动画的核心关键词在于“动”。 我们要回答几个问题:
What: 什么东西动?
Where: 往哪里动?
When: 什么时候动?动多久?
How: 怎么动?
How much: 动多少次?
这些问题的结果,就构成了一个动画的构成要素。
首先是动的主体是什么?就是我们的HTML标签,或者是标签构成的复杂组件之类的。对我们来说,主要就是
和. 第二,往哪里动?这就是要变化的css属性。这也是我们想用来串起来的css的知识点。 第三,什么时候动?我们需要指定动画的时长,起始的时机等等。这是纯动画的技术属性。 第四,怎么动?是匀速动,还是加速动,还是先加速再减速,还是要搞个贝塞尔曲线之类的,这也是动画的技术属性。 第五,动多少次?是一次,还是多次,还是一直动下去?这也是纯动画的技术属性。
transition动画
我们先学习一个简单的css属性动画,叫做transition。 它就是由上面的4个属性组成的:
transition-property: 指定要变的css属性值
transition-duration: 动画时长
transition-timing-function: 动画的快慢变化
transition-delay: 动画起始的延迟时间
我们来看个例子:
#hellocss { transition-property: width; transition-duration: 5s; transition-timing-function: linear; transition-delay: 1s; }
这个动画指定的意思是说,如果宽度width变化了,则延迟一秒运行5秒宽度变化的动画。变化速度是匀速的。
为了看得清楚,我们设一个初始的width,再加上一个背景色和前景色:
<style> #hellocss { background-color: blue; color: yellow; width: 20px; transition-property: width; transition-duration: 5s; transition-timing-function: linear; transition-delay: 1s; } </style>
既然是动画,那么要有变化。 于是我们写两句javascript:
<script> function trans1(){ let hcss1 = document.getElementById("hellocss"); hcss1.style.width = "100px"; } </script>css怎么实现动画