css动态特效 @keyframes

---

一.创建动画效果

css动画效果创建：

百分比（0%、100%）表示动画执行到该进度时运行的样式代码

@keyframes rotateAnimate1 {
  0% {
    transform: rotateX(45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(45deg) rotateZ(360deg);
  }
}
@-webkit-keyframes rotateAnimate1 {
  0% {
    transform: rotateY(45deg) rotateX(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateY(45deg) rotateX(-45deg) rotateZ(-360deg);
  }
}

二.在css选择器中引用

代码如下（示例）：

 -webkit-animation: rotateAnimate1 2s infinite linear;
  animation: rotateAnimate1 2s infinite linear;

rotateAnimate1 ：上方自己编写的动画名称
2s：表示执行的时间（总时间）
infinite：这里是播放次数；（infinite表示播放无限次，也可以用数字进行代替，代表执行多少次）
linear:表示执行的速率；（这里linear表示全程匀速执行）

---

三.参数解释

这是官方给出的案例（自我解释一下）
animation: name duration timing-function delay iteration-count direction;

animation: （动画名称） （动画执行的时间）（动画执行的速度 ）（动画延迟多长时间执行）（播放次数） （是否轮流播放） ;

---

参数不一定要全部输入，如有些参数自己不想要，即可忽略，如未填写他将使用默认值进行渲染！！！

对于参数的解释这里为了方便引用w3cshool中的解释

animation（调用动画以及参数的解释，与-webkit-animation通用）

duration（动画执行的时间）

这里是自己输入，以秒为单位

timing-function（动画执行的速度）

delay（动画延迟多久开始）

这里也是自己输入，以秒为单位

iteration-count（动画执行的次数）

direction（是否轮流播放）

这些既是我对于css动画的一些个人见解，如有出入欢迎指正！！！

---

-webkit-keyframes 指在火狐浏览器中运用，个人使用的是谷歌浏览器，目前还没碰到什么问题！！！

---

四.题外话（一些css函数）

1.缩放函数

scale(x,y) 函数让元素根据中心原点对对象进行缩放，大于1进行放大，小于1则缩小，如果为负值，则先进行翻转再进行缩放操作。
transform:scale(-2,2); 调用缩放

2.旋转函数

rotate(x) 通过选定元素原点中心进行旋转，正：顺时针，负：逆时针（2d).

transform:rotate(45deg) 调用旋转，45deg代表旋转的角度，0-360deg，可以是负值，正负不影响旋转，只影响旋转的方向

3.倾斜函数

skey(x,y) 可以将元素以其中心位置围绕着x轴与y轴按照一定角度进行倾斜。
transform: skew(-10deg); 这里调用倾斜，括号中带入角度即可，0-360deg

---

三种函数可以同时在一个transform中使用，搭配得当可以产生意想不到的效果

---

今天又是咸鱼的一天！！！