CSS制作动画常用技巧有哪些
这篇文章主要介绍CSS制作动画常用技巧有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了文登免费建站欢迎大家使用!
transition
CSS 中有一个transition
属性,能够监听某个 CSS 属性的变化,通过属性变化的控制,实现简单的动画效果:
transition CSS 属性是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个简写属性。
html代码
Document 鼠标悬浮查看效果
动画效果点击此处查看 地址https://codepen.io/wjq990112/pen/PoqEemX
体验完了,现在来具体讲一下用法:
css代码
transition: transition-property | transition-duration | transition-timing-function | transition-delay;
这样写你们估计看不懂,我们一条一条来拆解:
css代码
transition-property: background; /* 任何你需要侦听变化的 CSS 属性 */ transition-duration: 1s; /* 设定过渡动画的时长 */ transition-timing-function: ease-in-out; /* 设定过渡动画的效果 */ transition-delay: 0.2s; /* 设定触发动画的延迟 */
而transition
属性就是由上面的 4 条 CSS 属性组合而成。
第一第二个属性是必须项,用于指定侦听需要添加过渡动画的属性以及指定动画时长。
第三第四个属性为可选项,用于设定过渡动画的效果和延迟。
transition-timing-function的可选值详见
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
第一个属性还有 2 个特殊值:none:不对任何属性进行侦听 all:对所有属性进行侦听并为其添加过渡动画。
当省略第三个属性时,第二个时间项会被自动解析为动画效果延迟。
干说还是有点难理解,举个栗子吧:
css代码
transition: background 1s ease-in-out 0.2s;
上面这个例子,就是前面的代码中的一部分。
意思是侦听background
的变化,为其添加 1 秒的过渡动画,过渡动画的效果是慢开始慢结束,并在属性变化 0.2 秒后才开始执行。
那么上面代码中的这一段:
css代码
.box { width: 200px; height: 50px; line-height: 50px; text-align: center; color: #fff; background: #000; border-radius: 4px; /* 使用 transition 侦听 CSS 属性变化 为其加上动画 */ transition: background 1s ease-in-out 0.2s, color 3s, width 5s; } .box:hover { width: 400px; color: #000; background: #fff; }
代码中的transition
属性分别为background``color``width
加上了过渡动画,当class=box
的标签的这三个属性发生变化时,就回自动为其加上默认或指定的动画效果。
接下来我们就用它来做一些进阶的用法:
在实现动画的过程中,可能会需要使用一种常用的方式:overflow
障眼法。
用于实现一些类似Tab
切换的效果:
html代码
Document 12
动画效果点击此处查看https://codepen.io/wjq990112/pen/MWwrXWo
实现这个效果只需要将容器设置为overflow: hidden
;,然后对容器内的tab
侦听transform
属性,使用transform: translateX()
使其在 X
轴方向移动,大功告成了。
还有一些旋转效果也可以使用transform: rotateZ();
使其在浏览器平面上旋转实现,默认是以几何中心为中心点进行旋转。
animation & keyframes
animation
属性的用法和transition
比较相似,接下来由我来详细介绍一下。
animation CSS 属性是 animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
先做个简单的旋转效果体验一下:
html代码
Document 旋转
动画效果点击此处查看https://codepen.io/wjq990112/pen/mdJXeqm
这是一个基础的旋转动画,用到了animation
和keyframes
两个常用于制作动画的 CSS 属性。
animation
现在我们来讲一下基础用法:
css代码
animation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-fill-mode | animation-play-state;
这样讲肯定还是不懂,继续一条一条拆解开给大家讲解:
css代码
animation-name: rotate; /* 自定义 keyframes 名 */ animation-duration: 10s; /* 设定单次过渡动画时长 */ animation-timing-function: linear; /* 设定单次过渡动画效果 */ animation-delay: 0s; /* 设定单次过渡动画延迟时间 */ animation-iteration-count: infinite; /* 设定过渡动画执行次数 infinite 表示无限循环 */ animation-direction: normal; /* 设定过渡动画方向 可对奇数偶数次动画分别设定 */ animation-fill-mode: none; /* 设定过渡动画的填充模式 */ animation-play-state: running; /* 设定过渡动画运行或停止 */
相信大部分属性都很好理解,只有两个属性可能会比较难理解。
animation-direction
和animation-fill-mode
应该可以说是最难理解的两个属性了,我们再详细讲解一下:
css代码
/* * normal: 按照 keyframes 设定的动画方向运行 * reverse: 按照 keyframes 设定的动画方向的反方向运行 * alternate: 先按照 keyframes 设定的动画方向运行 运行结束后再反方向运行 * alternate-reverse: 先按照 keyframes 设定的动画方向的反方向运行 运行结束后再正向运行 */ animation-direction: normal | reverse | alternate | alternate-reverse; /* * none: 不设定填充模式 默认在动画开始及结束时都停留在动画未开始的状态 * forwards: 动画结束后停留在动画的最后一帧 * backwards: 动画开始前停留在动画的第一帧 * both: 动画开始前和动画结束后分别停留在动画的第一帧和最后一帧 */ animation-fill-mode: none | forwards | backwards | both;
这两个属性可以说是最难理解的,如果想看设定之后的效果,可以转战MDN
。
keyframes
这个CSS属性,相信学过一些简单的动画制作的同学肯定了解,很简单,就是关键帧。
为一个动画设定关键帧,CSS将自动填充他的运动路径。
css代码
@keyframes rotate { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(359deg); } }
上面这段代码,就是为设定了animation
属性的div
标签创建了两个关键帧,一个是动画起始位置的样式,另一个是动画结束位置的样式,CSS将自动填充动画的过程(即旋转 359 度)。
不仅仅可以设置开始和结束的位置(0%
可以使用from
关键字代替,100%
可以使用to关键字代替),还可以在动画的运行过程中插入关键帧,例如33%
,50%
,66%
等等,CSS会按照关键帧的样式,对动画进行自动填充。
通常情况下,keyframes
会与animation
配合使用。
讲完了animation
和keyframes
的用法,我们来看一道面试题,来自本人 2020 年某跳动实习生招聘一面:
请你使用 CSS 实现一个方块来回移动,无限循环。
这个题目其实有 2 种做法,但是原理都是一样的,这里就不放 HTML 代码了,直接放 CSS 的部分:
/* * ① */ @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(200px); } 100% { transform: translateX(0); } } .move { width: 100px; height: 50px; background: yellow; animation: move 1s linear infinite; } /* * ② */ @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } } .move { width: 100px; height: 50px; background: yellow; animation: move 0.5s linear infinite alternate; }
以上是“CSS制作动画常用技巧有哪些”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
文章名称:CSS制作动画常用技巧有哪些
网页链接:http://myzitong.com/article/gjsegj.html