关键词：
【CSS3】CSS3动画——我离前端的炫酷又近了一步
博客说明
文章所涉及的部分资料来自互联网整理，当然还有自己个人的总结和看法，分享的目的在于共建社区和巩固自己。引用的资料如有侵权，请联系本人删除！幸好我在，感谢你来！
说明
CSS3 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash。
为了学习前端的动效，我简直是不折手段。目前就抓着CSS的动画来搞一波。
什么是动画
⭕老规矩，问句开头。
在需要变化的时间节点上指定一些关键帧，关键帧就是此刻所定义的样式。例如我在1s左移5m，3s左一15m，这时就有两个关键帧，因为这两个关键帧，画面就发生了位移，那么动画也就产生了。
下面这句话总结到位：动画使元素逐渐从一种样式变为另一种样式。
CSS3的动画主要依赖@keyframes和animation来实现。
@keyframes和animation的浏览器支持
@keyframes 规则
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
@keyframes myfirst
from background: red;
to background: yellow;
以上的就是一个简单的动画，关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。也就是从红色变成黄色。
为了得到最佳的浏览器支持，使用 0% 和 100% 选择器是最好的选择。
animation
animation既然动画的关键帧都有了，那么就需要把这个关键帧落实并绑定到某个DOM上。
语法
可以一起写，也可以分开写属性。
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name
指定要绑定到选择器的关键帧的名称
语法
animation-name: keyframename|none;
// keyframename 指定要绑定到选择器的关键帧的名称
animation-duration
动画指定需要多少秒或毫秒完成
语法
animation-duration: time;
// time 指定动画播放完成花费的时间。
animation-timing-function
指定动画将如何完成一个周期
语法
animation-timing-function: value;
动画函数
-
linear 动画从头到尾的速度是相同的。
-
ease 默认。动画以低速开始，然后加快，在结束前变慢。
-
ease-in 动画以低速开始
-
ease-out 动画以低速结束。
-
ease-in-out 动画以低速开始和结束。
-
steps(int,start|end）指定了时间函数中的间隔数量（步长）。
有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。
第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。
-
cubic-bezier(n,n,n,n) 贝塞尔曲线
给一个贝塞尔曲线的的一个网站，你会感谢🙏我的哈！地址
animation-delay
定义动画什么时候开始，单位可以是秒（s）或毫秒（ms）
语法
animation-delay: time;
// time 定义动画开始前等待的时间，以秒或毫秒计
animation-iteration-count
定义动画应该播放多少次。
语法
animation-iteration-count: value;
// n 定义应该播放多少次动画
// infinite 指定动画应该播放无限次（永远）
animation-direction
是否循环交替反向播放动画。
这个是一个可玩性很高的一个属性。
语法
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
参数解析
- normal 默认值。动画按正常播放。
- reverse 动画反向播放。
- alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
- alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
- initial 继承的属性
- inherit 继承的属性
animation-fill-mode
属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
如果你需要考虑到动画的状态，可以使用这个属性，比如保留动画改变后的效果。
语法
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
参数解析
- none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
- forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
- backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。
- both 动画遵循 forwards 和 backwards 的规则。
- initial 继承的属性
- inherit 继承的属性
animation–play-state
指定动画是否正在运行或已暂停。
语法
animation-play-state: paused|running;
// paused 指定暂停动画
// running 指定正在运行的动画
案例
颜色变换
div的颜色由红色变为黄色
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画测试</title>
<style>
div
width:100px;
height:100px;
background:red;
animation:myfirst 6s;
@keyframes myfirst
from background:red;
to background:yellow;
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
顺时钟移动
将div顺时针移动
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画测试</title>
<style>
div
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s;
@keyframes myfirst
0% background:red; left:0px; top:0px;
25% background:yellow; left:200px; top:0px;
50% background:blue; left:200px; top:200px;
75% background:green; left:0px; top:200px;
100% background:red; left:0px; top:0px;
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
总结
其实也看到这些基础的动画，其实实现起来并不复杂，那些复杂的动画也都是通过这样基础的动画构建的。但是是不是会有一个疑问，怎么记得住这样的属性的使用呢？
这个问题和问PS的快捷键怎么也记不住是一样的，因为都没有经常使用，怎么记得住。等画了上百个复杂动画之后，相信就会对这个动画有比较好的了解啦！
期待后续花样的动画案例吧！一切才刚刚开始！
感谢
万能的网络
公众号-归子莫，小程序-小归博客
如果你感觉对你有帮助的话，不妨给我点赞👍吧，持续关注也行哈！
unityshader入门☀️|使用shader实现一个彩虹球效果✨！闪闪发光的特效离我又近了一步！(代码片段)
目录📢前言🍇彩虹球制作🏳️🌈简单介绍一下Shader结构🏳️🌈彩虹球实例Shader代码🏳️🌈Unity操作🏳️🌈效果展示💬总结📢前言前几天看到CSDN的一位Unity大佬（... 查看详情
那些你不知道的炫酷导航交互效果(代码片段)
基于上次发布的那些你不知道的炫酷按钮交互效果反馈比较好，后续将继续收集那些炫酷的交互效果，希望可以给你的项目添砖加瓦，更上一层楼。那些你不知道的炫酷交互效果系列：那些你不知道的炫酷按钮交互效果那些你不... 查看详情
那些你不知道的炫酷开关交互效果(12种)(代码片段)
...12款不同交互效果，相信总有一款适合你。那些你不知道的炫酷交互效果系列：那些你不知道的炫酷按钮交互效果那些你不知道的炫酷导航交互效果那些你不知道的炫酷开关交互效果效果1基于普通的开关效果增加了向内部延伸的... 查看详情
7种炫酷html5svg液态水滴融合分解动画特效
这是一组使用HTML5SVG过滤器制作的炫酷液态水滴融合分解动画特效。这些SVG动画特效使一些HTML元素。如菜单、分页button、APP、选择框等元素的过渡动画像几粒水滴一样融合分解。效果很的酷。通过SVGFilters能够改动一个给定的图... 查看详情
读《算法》有感
...以学起来自然有点像读大学的样子。可这不都是事儿，我又近了一步呢。 刚刚读到背包（Bag）、队列（Queue）、栈（Stack）的时候，顿时豁然开朗，感觉原来这么简单的数据类型，竟然可以做这么多事情。 原来从来没想... 查看详情
vim即gvim的炫酷搜索模式与技巧
一、进入搜索模式1.打开文件，狂按 <Esc> 进入normal模式，然后按 / 或者 :/ 进入搜索模式，添加上关键字例如world，按回车即搜索world；:/world#向后搜索2.打开文件，狂按 <Esc> 进入norm... 查看详情
小白也可以玩转的炫酷大屏！
从2015年开始，数据可视化大屏备受很多企业青睐，也是展现公司业务数据的不二之选。可视化大屏怎么这么火？领导天天要，业务人员、开发人员、UI设计师就得一起熬夜加班。那么，有没有一种简单高效、还... 查看详情
四个复制就能用的炫酷网页特效(代码片段)
第一个：炫酷星空<!DOCTYPEHTML><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>运营系统登录页</title><linkh 查看详情
css动画篇之炫酷时钟之时钟墙(代码片段)
...时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。前言看到这个动画效果你有什么思路，你会怎么实现呢？可以先想一下你的答案，看看与本文的思路是否一致... 查看详情
[翻译]numsharp的数组切片功能[:]
...的功能，所以.NET社区距离拥有强大的开源机器学习平台又近了一步。 Python之所以是机器学习的首选语言，部分原因就是因为它拥有一 查看详情
h5c3结合jquery实现的炫酷分裂式轮播图
<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><style>*{padding:0;margin:0;}.container{width:560px;height:380px;margin:100pxauto;borde 查看详情
esp保姆级教程疯狂毕设篇——案例：基于esp8266和app的炫酷rgbws2812彩灯控制
忘记过去，超越自己❤️博客主页单片机菜鸟哥，一个野生非专业硬件IOT爱好者❤️❤️本篇创建记录2023-01-01❤️❤️本篇更新记录2022-01-01❤️ 查看详情
用python-myqr参数制作自己的炫酷二维码(代码片段)
1.下载myqr库在Python3环境下，输入如下指令：pipinstallmyqr等到提示下载成功就可以了2.导入myqr库打开pycharm的file-setting-PythonInterpreter在打开的界面中点击+号，搜索MyQr，选中第一个，点击左下角的installPackage下载好啦，安装成功，现... 查看详情
随便写写
2017年1月15日离找工作的日子又近了一天，越来越感觉到时间的紧张；好多要学的东西还没学；心情较为烦躁，淡定。。淡定。。下午学习了Qt创建菜单和工具栏，概念还不是太清晰；体会到最好的方式还是去看API；当然学什么看... 查看详情
只要10分钟，搭建属于个人的炫酷网站，你还在犹豫什么？(代码片段)
💂个人主页:IT学习日记🤟版权:本文由【IT学习日记】原创、在CSDN首发、需要转载请联系博主💬如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦💅想寻找共同成长的小伙伴，请点击【技... 查看详情
手把手教你做一个python+matplotlib的炫酷的数据可视化动图(代码片段)
1.效果图 2.注意：上述资料是虚拟的，为了学习制作动图，构建的。仅供学习，不是真实数据，请别误传。当自己需要对真实数据进行可视化时，可进行适当修改。 3.代码：#第1步：导出模块，固定importpandasaspdimportmatplotli... 查看详情
不生气的大妈
...，想到自己能拥有文科莫斯家族的力量，自己离着海贼王又近了一步。不在乎，路飞的狂言冒犯。我忽然想到生活中，也许现在有很多不如意， 查看详情
关于动画的各种实现方法
...给用户带来更好的操作体验；一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早... 查看详情