文章目录
- 一.创建动画效果
- 二.在css选择器中引用
- 三.参数解释
- animation（调用动画以及参数的解释，与-webkit-animation通用）
- duration（动画执行的时间）
- timing-function（动画执行的速度）
- delay（动画延迟多久开始）
- iteration-count（动画执行的次数）
- direction（是否轮流播放）
- 四.题外话（一些css函数）
- 1.缩放函数
- 2.旋转函数
- 3.倾斜函数
- **今天又是咸鱼的一天！！！**
一.创建动画效果
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中使用，搭配得当可以产生意想不到的效果
