学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~，谢谢大家⭐️⭐️⭐️~
这篇文章只是一个简介，方便了解全貌，当你想不起某一个用法的时候，能够快速地找到提示。
官网参考： https://www.runoob.com/css3/css3-animations.html
🍒 第一部分：CSS 变形属性
- CSS3实现圆角（border-radius）
- 阴影（box-shadow）
- 对文字加特效（text-shadow、）
- 线性渐变（gradient）
- 旋转（transform）
- transform：translate(0px,-30px) 移动元素，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。在此基础上有两个扩展函数 translateX()和translateY();
- transform：rotate(9deg) 旋转元素，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
- transform：scale(0.85,0.90) 方法用于增加或缩小元素的大小，可以使用元素尺寸发生变化，在此基础上用两个扩展函数 scaleX()和scaleY();
- transform：skew(-9deg,0deg) 让元素倾斜，在此基础上有两个扩展函数skewX()和skewY()
- transform：matrix(0.866,0.5,-0.5,0.866,0,0):方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
🍓 第二部分：CSS 过渡属性Transition
css过渡属性
过渡属性是一个复合属性，主要包括以下几个属性
- transition-property:规定应用过渡的 CSS 属性的名称。
- transition-duration:定义过渡效果花费的时间。默认是 0。
- transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。
- transition-delay:规定过渡效果何时开始。默认是 0。
1、transition-property属性
规定应用过渡的 CSS 属性的名称。（需要产生动画的属性）才能具备过渡效果。
如要改变元素的宽度属性，可将transition-property的属性设置为width
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */2、transition-duration属性
主要用来设置一个属性过渡到另一个属性所需的时间，也就是持续时间
如果改变一个属性，所持续的时间为5秒，可将该属性的值设置为5秒
transition-duration: 5s;\
-webkit-transition-duration: 5s; /* Safari */3、 transition-timing-function属性
属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，语法：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);包括这几种
transition-timing-function: linear;\
-webkit-transition-timing-function: linear; /* Safari and Chrome */4、transition-delay属性
transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后等待多长时间开始执行。
等待2秒前切换效果开始：
transition-delay: 2s;\
-webkit-transition-delay: 2s; /* Safari */5、transition的局限
transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
🍊 第三部分：CSS Animation 动画
@keyframes 规则
keyframes关键字用来定义动画的各个状态，它的写法相当自由。
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst {
from { background: red }
50% { background: orange }
to { background: yellow }
}<div></div> //html div元素
/*动画效果css*/
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}另外一点需要注意的是，浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡。
这里有一个非常神奇的可以看到steps函数的用处。案例如下：
<h1>Animation, ha ha ha.</h1>@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
h1 {
font: bold 200% Consolas, Monaco, monospace;
border-right: .1em solid;
width: 16.5em; /* fallback */
width: 20ch; /* # of chars */
margin: 2em 1em;
white-space: nowrap;
overflow: hidden;
animation: typing 20s steps(20, end), /* # of steps = # of chars */
blink-caret .5s step-end infinite alternate;
}效果图：
animation属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width:100px;
height:100px;
background:red;
position:relative;
/*animation:myfirst 5s linear 2s infinite alternate;*/ /*简写可以将下面的都省略*/
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@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;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
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>
