02-07-卡其漫画-css3及动画应用-动画animate
前言：这篇文章中，咱们主要会介绍css3中animate动画的建立和使用，经过animate的学习，咱们能够进一步的理解以前transition过渡的特性，同时也可使用animate动画在页面中添加更加丰富的效果。css
以前咱们学习过transition过渡，咱们知道，过渡仍是有一些局限的，如它只是两个状态之间的过渡，而且只能执行一次，执行以后会恢复到元素的原始状态，要解决这些局限，咱们就有必要来学习animate动画了。这篇文章学习了以后，各位小伙伴能够无比轻松的完成卡其漫画中的一个动画效果了：前端
学习动画，主要能够从两个方面进行学习：css3
1.建立动画学习
2.使用动画动画
首先来看下如何建立动画，在以前使用transition的时候，咱们肯定了元素开始和结束时的状态，这个开始和结束的状态就能够称为关键帧(什么是关键帧，就是定义动画在不一样阶段的状态)，animate动画和transition的第一个区别就是它能够定义多个关键帧，来看下它的语法 ：spa
@keyframes animationname {
keyframes-selector {
css-styles;
}
}
复制代码
上面的语法 很差懂，咱们再细化一下：3d
@keyframes 动画自定义名称 {
from | 0% {
// 这里就能够为元素添加样式了
properties: value;
}
百分比 {
properties: value;
}
...
to | 100% {
properties: value;
}
}
说明：
1.@keyframes:关键帧，多个关键帧连续的播放就组成了动画，@keyframes属性能够用来定义多个关键帧
1.中间的百分比能够添加多个，以此来精确控制中间的状态变化,如10%,20%,30%...
2.from是指开始状态，所描述的时间和0%相同
3.to是指结束状态，所描述的时间和100%相同
4.两个关键帧以前的状态变化是自动生成的，这点和过渡相似
好像咱们也能够简单认为，animate动画至关于拥有多个状态变化的过渡
复制代码
好了，不扯这么多无聊的东西，咱们假如要实现一个简单的动画，那么应该如何建立？code
很是简单，这个效果稍稍 分析一下，就知道有如下个状态：从 左上》右上》右下》 左下》左上orm
那咱们就能够这样来写代码了：cdn
// 盒子基本样式
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
// 动画名称咱们自定义为move
@keyframes move {
// 原始位置：左上
from {
transform: translate(0,0)
}
// 右上
25%{
transform: translate(300px,0)
}
// 右下
50%{
transform: translate(300px,300px)
}
// 左下
75%{
transform: translate(0px,300px)
}
// 原始位置：左上
to{
transform: translate(0,0)
}
}
复制代码
嗯，感受是这么回事，也没有想象中的复杂，可是我怎么去看这个动画效果呢？@keyframes只是用于建立动画，若是想使用这个动画效果，咱们就必须学习css3中的animation相关样式属性了。
animation只是一个简单属性(相似于transition)，它其实由如下多个属性共同组成：
animation-name:指定要绑定到选择器的自定义动画的名称--必需
animation-duration：指定动画完成所需的时间，默认值为0，为0不会播放动画,单位为s或者ms--必需
animation-timing-function：指定动画播放时的速率曲线，默认为ease,与transition同样
animation-delay：指定动画在启动前的延迟间隔，默认为0
animation-iteration-count：指定动画的播放次数,默认为1次，其中关键字infinite为无限次
animation-direction：指定是否轮流反向播放动画，默认为normal正常
animation-fill-mode：指定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式，这个语言有点很差懂，呆会实例说明
animation-play-state：指定动画的播放状态：运行或暂停
复制代码
太多啦，太多啦。。好在里面只有两个属性是必需的：animation-name和animation-duration，犹豫什么，咱们为以前的div盒子指定动画，两个属性走起：
.box {
width: 100px;
height: 100px;
background-color: #f00;
/* animation-name:指定动画名称 */
animation-name: move;
/* animation-duration：指定动画完成的时间 */
animation-duration: 4s;
}
复制代码
效果来一波：
咱们再将动画的建立和使用综合在一块儿来讲明一下：
嗯，应该大概清晰了。不可否认，确实出现了咱们大体想要的效果，可是仔细的观察，仍是有一些问题。
首先，咱们以现盒子的移动不是匀速，而是 慢》快》慢 这样的一个变化，那若是想设置盒子移动的速率，咱们就可使用animation-timing-function了，它的属性值和以前所学习的transition没有什么区别，咱们来加上匀速效果：
........这里只关注动画相关代码........
/* animation-name:指定动画名称 */
animation-name: move;
/* animation-duration：指定动画完成的时间 */
animation-duration: 4s;
/* animation-timing-function：指定动画的速率曲线 */
animation-timing-function:linear;
复制代码
不要被上面的gif动图骗到(页面中gif会重复播放，可是并不表明动画就是屡次执行的，因此你会看到一次执行完毕后会明显的停滞)，若是大家亲自动手试一试会发现动画其实默认只会执行一次，那若是你想指定次数，就可使用animation-iteration-count了，
直接上代码来一波：
/* animation-name:指定动画名称 */
animation-name: move;
/* animation-duration：指定动画完成的时间 */
animation-duration: 4s;
/* animation-timing-function：指定动画的速率曲线 */
animation-timing-function:linear;
/* animation-iteration-count:指定动画播放的次数，infinite为无限次 */
animation-iteration-count:2;
复制代码
两次以后才会中止，嗯，这就是这个效果，若是你想永远不停，那还不试下infinite?
接下来看一下一个比较有意思的属性：animation-direction，它指定是否轮流反向播放动画，什么意思呢？大家都见过那种老式的摆钟吧，从一边摆过去，从另一边摆回来，这种效果很容易想明白：开始>>结束再从结束>>开始，咱们干脆就来实现这个简易版的动画玩一玩:
首先，添加一个元素，为元素添加基本样式：
.box{
width: 10px;
height: 200px;
/* 为了看清楚，设置红色背景 */
background-color: #f00;
/* 为了看清楚，将元素放置到屏幕中间一点 */
margin:100px auto;
/* 设置旋转轴心:顶部中间位置，这一步很重要，否则就会围绕中心轴旋转了 */
transform-origin: center top;
/* 设置起始的旋转角度 */
transform: rotate(-60deg);
}
复制代码
/* 建立动画 */
@keyframes rotateClock {
from{
/* 开始时状态 */
transform: rotate(-60deg)
}
to{
/* 结束时动画 */
transform: rotate(60deg)
}
}
复制代码
因而咱们就能够为元素添加动画了：
.box{
width: 10px;
height: 200px;
/* 为了看清楚，设置红色背景 */
background-color: #f00;
/* 为了看清楚，将元素放置到屏幕中间一点 */
margin:100px auto;
/* 设置放置轴心:顶部中间位置 */
transform-origin: center top;
transform: rotate(-60deg);
/* 指定动画名称 */
animation-name: rotateClock;
/* 指定动画时间 */
animation-duration: 1s;
/* 指定动画次数：infinite为无限次 */
animation-iteration-count: infinite;
/* 指定动画速率曲线 */
animation-timing-function: ease-in-out;
}
复制代码
嗯，虽然出来效果，可是有问题？现实生活中的摆钟是交替摆的效果，就是从开始到结束再从结束到开始。这个时候就使用到一个样式了：animation-direction，它有四个值常见：
- normal:正常，从开始到结束
- reverse:反向，从结束到开始
- alternate:交替，从开始到结束，从结束到开始
- alternate-reverse：反向交替，从结束到开始，从开始到结束
这里咱们感受应该选择alternate啦，没错，你猜对啦！！赶快加上去，最终的样式是这样的：
.box{
width: 10px;
height: 200px;
/* 为了看清楚，设置红色背景 */
background-color: #f00;
/* 为了看清楚，将元素放置到屏幕中间一点 */
margin:100px auto;
/* 设置放置轴心:顶部中间位置 */
transform-origin: center top;
transform: rotate(-60deg);
/* 指定动画名称 */
animation-name: rotateClock;
/* 指定动画时间 */
animation-duration: 1s;
/* 指定动画次数：infinite为无限次 */
animation-iteration-count: infinite;
/* 指定动画速率曲线 */
animation-timing-function: ease-in-out;
/* 指定轮流反向播放动画 ，alternate是轮流，交替的意思*/
animation-direction:alternate;
}
复制代码
怎么样，一个简易的摆钟效果就出来了，是否是很容易实现啊。。反正比js容易多了。。哈哈
最后，再来介绍其它几个动画相关样式，先来关注下animation-delay,这个样式是用来实现动画效果的延迟，效果和transition-delay相似,如
animation-delay:2s;
复制代码
有了这个样式，那么动画会在延迟2s后再开始，小伙伴们能够本身试下。
以后，咱们再来看下animation-fill-mode,文章前面说过它的做用是指定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式，这话太难懂了，说得直白一点，它就是用来设置动画等待或者结束的状态，它有三个常见值：
- forwards：动画结束后，元素样式停留在 100% 的样式
- backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式
- both： 同时设置了 forwards和backwards两个属性值
动画也有一个默认的特性，就是执行完毕以后 就会恢复到元素的原始状态，若是想要在动画结束以后停留在结束时的状态，forwards是你完美的选择，咱们用简单的一段样式代码来看下效果
对于backwards,咱们得加了延迟才能看到它的效果，咱们来看正面这一段动画代码：
.box{
width: 10px;
height: 200px;
/* 为了看清楚，设置红色背景 */
background-color: #f00;
/* 为了看清楚，将元素放置到屏幕中间一点 */
margin:100px auto;
/* 设置放置轴心:顶部中间位置 */
transform-origin: center top;
/* 嘿嘿嘿嘿：注意这里，咱们将初始的旋转注释了，意味着将没有默认的旋转了 */
/* transform: rotate(-60deg); */
/* 指定动画名称 */
animation-name: rotateClock;
/* 指定动画时间 */
animation-duration: 1s;
/* 添加动画的延迟 */
animation-delay: 2s;
}
/* 建立动画 */
@keyframes rotateClock {
from{
transform: rotate(-60deg)
}
to{
transform: rotate(60deg)
}
}
复制代码
注意上面的代码，咱们为动画添加了延迟，在添加animation-fill-mode：backwards;以前的效果是什么呢？你们仔细看：
看清楚了吗？在延迟的时间段内，这并无进入到动画的初始状态，咱们在动画的from的时候添加了rotate样式，可是在2S范围内它并无体现出这个rotate的效果，正面咱们添加animation-fill-mode：backwards来看下
.box{
width: 10px;
height: 200px;
/* 为了看清楚，设置红色背景 */
background-color: #f00;
/* 为了看清楚，将元素放置到屏幕中间一点 */
margin:100px auto;
/* 设置放置轴心:顶部中间位置 */
transform-origin: center top;
/* transform: rotate(-60deg); */
/* 指定动画名称 */
animation-name: rotateClock;
/* 指定动画时间 */
animation-duration: 1s;
/* 添加动画的延迟 */
animation-delay: 2s;
/* 设置保持动画开始时的状态：不论是否有延迟，都会马上进入到动画的初始状态 */
animation-fill-mode: backwards;
}
复制代码
都看明白了吧，效果其实很简单，主要是本身须要去体验一下。那若是我想动画一开始就进入到初始状态，同时又须要保持它结束时的状态怎么办呢？嗯，还有一个属性both就是实现这个效果了：
animation-fill-mode: both;
复制代码
这里我就再也不作演示了。
相信不少小伙伴也看到，动画相关属性很是多，咱们在使用动画的时候若是每次都要写这么多代码，那实在是太麻烦了，因此，之后经常使用的方式仍是使用简写方式，它的语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
用中文再说一次：
animation: 动画名称 动画时间 速率曲线 动画延迟 执行次数 是否交替 开始和结束时的状态 动画的播放状态;
说明：除了name和duration是必须的，其它都是能够选择赋值的
复制代码
举个例子，咱们实现最初的盒子矩形环绕一周的效果，样式也能够这样写：
animation: move 4s linear 0s infinite;
复制代码
其它的样式效果能够根据须要进行添加哦！
好了，最后，咱们须要回到文章的开关所说的一个页面效果了，掌握了前面的动画的建立和添加代码以后，咱们来简单的作下这个效果：
页面元素代码，咱们为元素添加了up这个类样式
<div class="upload fr">
<i class="icon up"></i>
<span>我要投稿</span>
</div>
复制代码
以后，建立动画，并在fr的hover状态下添加动画效果
.fr:hover .up {
animation-name: upload;
animation-duration: .4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes upload {
from {
transform: translateY(0px)
}
to{
transform: translateY(-8px)
}
}
复制代码
到这篇文件为止，css3及动画的应用就大概介绍完了，同时记得文章还有配套的视频哦，到时候会一并在文章页上体现出来，若是各位小伙伴还有其余的须要，想学习其它的前端知识，能够留言，咱们会为你们增长新的文章，祝愿各位小伙伴在前端的道路上一切顺利哦！！
- 1. svg动画 animate
- 2. JQuery animate动画
- 3. Animate 动画
- 4. css animate 动画
- 5. css3 animate 经常使用动画
- 6. css3 动画+动画库
- 7. css3 动画 vs js 动画
- 8. JS动画与CSS3动画
- 9. css animate动画demo
- 10. jquery的animate动画
- 更多相关文章...
- • ionic 加载动画 - ionic 教程
- • PHP imagearc - 画椭圆弧 - PHP参考手册
- • 算法总结-滑动窗口
- • SpringBoot中properties文件不能自动提示解决方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. svg动画 animate
- 2. JQuery animate动画
- 3. Animate 动画
- 4. css animate 动画
- 5. css3 animate 经常使用动画
- 6. css3 动画+动画库
- 7. css3 动画 vs js 动画
- 8. JS动画与CSS3动画
- 9. css animate动画demo
- 10. jquery的animate动画