CSS动画--让div动起来
CSS动画
今天在写代码时候，遇到了css动画效果如何实现的问题，经过查阅和实践，总结出⼀下结论。
transition
transition 指定动画变化的对应属性以及动画的执⾏时间。
例如：transition：width 1s; 意思就是当width发⽣变化时，变化执⾏1s。
这种可以实现简单的动画效果，但对于复杂的动画，还不能够满⾜。
在此基础上，我还新发现⼀个对于css动画更⾼级的属性--animation。
animation是结合@keyframes（关键帧）进⾏使⽤的。
⽤法：
1 .graduallymove{
2 background-image: url(../../img/1.jpg);//设置背景
3 background-size:cover;//设置背景图⽚的样式铺满整个div
4 position: relative;//设置div的位置属性为相对定位
5 top: 100px;//设置距离上边100px
6 left: 800px;
7 width: 500px;//设置div宽度为500px
8 height: 400px;
9 transition: 1s;//设置div动画效果执⾏1s
10 box-shadow: 0 0 30px rgba(0, 0, 0, .5);//阴影效果范范围30px ⿊⾊半透明四周
11 animation: graduallymove 1.5s ease-out 0.2s ;//设置对象为 garduallymove 1.5s动画先快后慢 0.2s延迟后再发⽣
12 }
1 @keyframes graduallymove {
2 0%{
3 opacity: 0;
4 top: 100px;
5 left: 0px;
6
7 }
8
9
10
11 100%{
12 opacity: 1;
13 top: 100px;
14 left: 800px;
15 }
16 }
<body>
<!-- <div class="leftmove"></div> -->
<div class="graduallymove"></div>
</body>
效果就是，图⽚从左向右渐⼊，最后停在右边。位置为top：100px;left:800px;
对于animation，由于属性复杂，我再单独讲讲。
animation（包含以下⼏个属性值，可以混合写到⼀起，最后讲）
animation-name （动画对象）
animation-name：表⽰动画的对象。animation-name属性指定应⽤的⼀系列动画，每个名称代表⼀个由定义的动画序列。
/* Single animation */单⼀对象
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;
/* Multiple animations */复杂对象，多个对象
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;
/* Global values */全局值
animation-name: initial //最初的
animation-name: inherit//继承的
animation-name: unset//不设置的
animation-duration （动画时长）
animation-duration属性指定⼀个动画周期的时长。
默认值为0，表⽰⽆动画效果。
注意：负值⽆效，浏览器会忽略该声明，但是⼀些早期的带前缀的声明会将负值当作0s。
animation-timing-function （动画⽅式）
定义于⼀个关键帧区块的缓动函数(animation timing function)应⽤到改关键帧；另外，若该关键帧没有定义缓动函数，则使⽤定义于整个动画的缓动函数。
值描述
linear规定以相同速度开始⾄结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速)
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义⾃⼰的值。可能的值是 0 ⾄ 1 之间的数值。
animation-delay （动画延迟）
animation-delay CSS属性定义动画于何时开始，即从动画应⽤在元素上到动画开始的这段时间的长度。
animation-iteration-count （动画次数）
css渐入渐出动画animation-iteration-count 定义动画在结束前运⾏的次数可以是1次⽆限循环.
如果指定了多个值，每次播放动画时，将使⽤列表中的下⼀个值，在使⽤最后⼀个值后循环回第⼀个值。
可选值：
infinite
⽆限循环播放动画.
<number>动画播放的次数；默认值为1。
可以⽤⼩数定义循环，来播放动画周期的⼀部分：例如，0.5 将播放到动画周期的⼀半。不可为负值。
animation-direction （动画⽅向）
animation-direction CSS 属性指⽰动画是否反向播放
可选值
normal
每个循环内动画向前循环，换⾔之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate
动画交替反向运⾏，反向运⾏时，动画按步后退，同时，带时间功能的函数也反向，⽐如，ease-in 在反向时成为 ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse
反向运⾏动画，每周期结束动画由尾到头运⾏。(动画反向进⾏)
alternate-reverse
反向交替，反向开始交替
动画第⼀次运⾏时是反向的，然后下⼀次是正向，后⾯依次循环。决定奇数次或偶数次的计数从1开始。
animation-fill-mode （动画保持）设置动画最后的样式为哪样
animation-fill-mode 设置CSS动画在执⾏之前和之后如何将样式应⽤于其⽬标。
值
none
不设置任何样式
forwards
最后⼀个关键帧的样式（简单点说就是）最后动画的样式
backwards
将在应⽤于⽬标时⽴即应⽤第⼀个关键帧中定义的值，（最初的动画样式）
both
两个⽅向延展动画样式（个⼈觉得像forwards)
animation-play-state
animation-play-state 属性定义⼀个动画是否运⾏或者暂停。可以通过查询它来确定动画是否正在运⾏。
另外，它的值可以被设置为暂停和恢复的动画的重放。恢复⼀个已暂停的动画，将从它开始暂停的时候，⽽不是从动画序列的起点开始在动画。
可选值
running
当前动画正在运⾏。
paused
当前动画已被停⽌。
可都将属性写到⼀起
animation：duration(动画时长) | timing-function（动画类型） | delay（动画延迟） |iteration-count （动画次数）| direction （动画⽅向）| fill-mode（动画保持） | play-state（动画状态） | name（动画对象） ;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论