animation兼容性（了解）
CSS animation 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，重复次数以及如何重复来控制
目前从 Can I Use 查到浏览器的兼容性还是可以的
animation，一个简写的属性
是由animation-name，animation-duration，animation-timing-function，animation-delay，animation-interation-count，animation-direction，animation-fill-mode，animation-play-state这八个属性组成的
语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
@keyframes关键帧规则
首先还是得先了解一下这个动画是由每一帧的变化所构成的，因此我们需要定义关键帧的样式，从而控制动画的效果
语法：
@keyframes animationname {keyframes-selector {css-styles;}}
animationname: 必需的，定义animation的名称
keyframes-selector: 必需的，动画持续时间的百分比；合法值：0-100%;或者 from(和0%相同)，to(和100%相同)
css-styles: 必需的，一个或多个合法的css样式属性
- from - to写法如下
@keyframes changeColor{
//等效于0%
from:{
color:red
}
//等效于100%
to:{
color:blue
}
}
- 0-100%写法如下
@keyframes setColor{
0%:{
color:red;
}
50%{
color:yellow;
}
100%:{
color:blue
}
}
注意：
如果一个 @keyframes 里的关键帧的百分比存在重复的情况，以最后一次定义的关键帧为准；因为@keyframes的规则不存在层叠样式的情况，即使多个关键帧设置相同的百分值也不会全部执行。关键帧中出现的 !important关键词将会被忽略
animation-name
animation-name指定应用的一系列动画，这里后面填的是keyframes的名称，可以填多个复合动画名
语法：
animation-name:changeColor setColor;//这里的每一个名称changeColor或者setColor必须在keyframes里定义。
animation-duration
这个表示的是定义一个周期时长，默认是0s，即不执行动画。注意没有单位无效，并且这个属性直接关系到动画执行与否。也是一个复合属性，可以写多个动画时长
语法：
animation-duration: 10s, 30s//没有单位无效
animation-timing-function
表示一个过渡动画中一维数值的改变速度，与transition里的一样，可以用三次贝塞尔曲线，速度曲线。cubic-bezier()，ease-in(加速)，ease-out(减速)、ease-in-out(先加速后减速)、linear（匀速），也是可以写多个值，套用于多个动画。
animation-delay 设置动画延迟
定义动画开始前的等待时间，这个属性非一定要设置，默认值为0；也是可以写多个值，套用与多个动画，
提示：允许负值，-2s使动画马上开始，但跳过2秒进入动画
animation-duration：4s;//当前动画执行4s
animation-delay：-3s;//动画开始直接跳到第3s动画
animation-direction动画方向设置
animation-direction属性定义是否循环交替反向播放动画
**注意：**如果动画被设置为只播放一次，该属性将不起作用
语法：
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
animation-iteration-count动画在结束前运行的次数
语法：
animation-iteration-count: value;//value：可以是n 一个数字，定义应该播放多少次动画；可以是 infinite 指定动画无限循环
animation-fill-mode
animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。 默认值：none
语法：
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
animation-play-state
animation–play-state属性指定动画是否正在运行或已暂停。
**注意：**在JavaScript中使用此属性在一个周期中暂停动画
语法：
animation-play-state: paused|running;//paused：暂停动画，running：指定正在运行的动画
应用案例地球转动
周围的小球可围绕圆心转动，鼠标移入小球后，可停止动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3实现地球模型旋转缩放</title>
<style>
@keyframes animX {
0% {
left: 0px;
}
100% {
left: 500px;
}
}
@keyframes animY {
0% {
top: 0px;
}
100% {
top: 300px;
}
}
@keyframes scale {
0% {
transform: scale(0.4);
z-index: 0;
}
50% {
transform: scale(1);
z-index: 3;
}
100% {
transform: scale(0.5);
z-index: 0;
}
}
.ball {
width: 105px;
height: 105px;
/*background-color: #f66;*/
border-radius: 50%;
position: absolute;
color: #fff;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
background: yellow;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
line-height: 120px;
z-index: 3;
/*动画执行一次所需时间*/
animation-duration: 10s, 10s, 20s;
/*动画以何种运行轨迹完成一个周期*/
/* 在CSS的cubic-bezier()函数中，起点和终点的坐标是固定的，分别是(0,0)和(1,1)，因此，cubic-bezier()函数支持的参数值只有4个，代表了两个控制点的坐标，语法如下：
cubic-bezier(x1, y1, x2, y2) */
animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
/*动画播放次数,无线循环播放*/
animation-iteration-count: infinite;
/*是否轮流反向播放动画 alternate:正向播放*/
animation-direction: alternate;
animation-name: animX, animY, scale;
}
#lopp {
width: 500px;
height: 300px;
border: 2px solid #999;
border-radius: 50%;
position: absolute;
left: 50px;
top: 70px;
}
/*鼠标进入停止*/
.active {
animation-play-state: paused;
}
.circle {
position: absolute;
top: 114px;
left: 250px;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
z-index: 3;
color: #fff;
font-size: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
background: lightgreen;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}
.container {
position: relative;
transform: rotateX(20deg);
width: 800px;
height: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<div class="container">
<!-- 圆心-->
<div class="circle"><span style="line-height: 84px;">圆心</span></div>
<div class="borther">
<div id="lopp"></div>
<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">1</div>
<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">2</div>
<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">3</div>
<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">4</div>
<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">5</div>
</div>
</div>
</div>
<script>
var items = document.querySelectorAll('.ball')
for (var i = 0; i < items.length; i++) {
(function (i) {
items[i].style['animation-delay'] = (-5) - 4 * i + 's,' + (-4 * i) + 's,' + (-4 * i) + 's'
})(i)
}
function onMouseGo () {
for (var i = 0; i < items.length; i++) {
(function (i) {
items[i].classList.add('active')
})(i)
}
}
function onMouseMove () {
for (var i = 0; i < items.length; i++) {
(function (i) {
items[i].classList.remove('active')
})(i)
}
}
function clickMsg (e) {
alert(e.innerText)
}
</script>
</body>
</html>
2347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
