Logan 如果前面还有路，答应我，跑下去...

学习CSS3--CSS3动画

2017-09-11
Logan
CSS
 

CSS3动画 animation

动画(animation)

兼容性

IE10+ Firefox 16+ Chrome 43+ Sapafi 9+ Opera 30+ Android(-webkit)

animation-name

检索或设置对象所应用的动画名称

语法

animation-name: keyframesname | none;

  • keyframesname : 指定要绑定到选择器的关键帧的名称
  • none : 指定有没有动画（可用于覆盖从级联的动画）
.box{
	-webkit-animation-name: circle;
	        animation-name: circle;
}

@keyframes circle {
	from {transform: rotateX(0deg);  }
	to   {transform: rotateX(180deg);}
}

animation-duration

检索或设置对象动画的持续时间

语法

animation-duration: time;

  • time : 指定动画播放完成花费的时间。默认值为0，即没有动画效果
.box{
	-webkit-animation-name: circle;
	        animation-name: circle;
	-webkit-animation-duration: 2s;
	        animation-duration: 2s;
}

@keyframes circle{
	from {transform: rotateX(0deg);  }
	to   {transform: rotateX(180deg);}
}

animation-timing-fuction

检索或设置对象动画的过渡类型

语法

animation-timing-fuction: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

  • ease(默认) ： 动画以低速开始，然后加快，在结束前变慢
  • linear ： 动画从头到尾的速度是相同的
  • ease-in ： 动画以低速开始
  • ease-out ： 动画以低速结束
  • ease-in-out ： 动画以低速开始和结束
  • cubic-bezier(n,n,n,n) ： 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
.box{
	-webkit-animation-name: circle;
	        animation-name: circle;
	-webkit-animation-duration: 2s;
	        animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
}

@keyframes circle{
	from {transform: rotateX(0deg);  }
	to   {transform: rotateX(180deg);}
}

animation-delay

检索或设置对象动画的过渡类型

语法

animation-delay: time;

  • delay ： 可选，定义动画开始前等待的时间，以秒或毫秒计，默认为0
.box{
	-webkit-animation-name: circle;
	        animation-name: circle;
	-webkit-animation-duration: 2s;
	        animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-delay: 2s;
	        animation-delay: 2s;
}

@keyframes circle{
	from {transform: rotateX(0deg);  }
	to   {transform: rotateX(180deg);}
}

animation-iteration-count

检索或设置对象动画的循环次数

语法

animation-iteration-count: infinite | <number>;

  • infinite ： 无限循环
  • <number> ： 循环次数，默认值为1
.box{
	-webkit-animation-name: circle;
	        animation-name: circle;
	-webkit-animation-duration: 2s;
	        animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-delay: 2s;
	        animation-delay: 2s;
	-webkit-animation-iteration-count: 4;
	        animation-iteration-count: 4;
}

@keyframes circle{
	from {transform: rotateX(0deg);  }
	to   {transform: rotateX(180deg);}
}

animation-direction

检索或设置对象动画的在循环中是否反向运动

语法

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

  • normal ： 正常方向
  • reverse ： 反方向运行
  • alternate ： 动画先正常方向运行，再反方向运行，并持续交替进行
  • alternate-reverse ： 动画先反方向运行，再正常方向运行，并持续交替进行
  • alternate和alternate-reverse依赖于循环次数animation-iteration-count
.box{
	-webkit-animation-name: circle;
	        animation-name: circle;
	-webkit-animation-duration: 2s;
	        animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-delay: 2s;
	        animation-delay: 2s;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	-webkit-animation-direction: alternate-reverse;
	        animation-direction: alternate-reverse;
}

@keyframes circle{
	from {transform: rotateX(0deg);  }
	to   {transform: rotateX(180deg);}
}

animation-fill-mode

规定动画在播放之前或之后，其动画效果是否可见

语法

animation-fill-mode: none | forwards | backwards | both;

  • none ： 不改变默认行为
  • forwards ： 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
  • backwards ： 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
  • both ： 向前和向后填充模式都被应用
.box{
	-webkit-animation-name: circle;
	        animation-name: circle;
	-webkit-animation-duration: 2s;
	        animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-delay: 2s;
	        animation-delay: 2s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}

@keyframes circle{
	from {transform: rotateX(0deg);  }
	to   {transform: rotateX(180deg);}
}

animation-play-state

规定动画正在运行还是暂停

语法

animation-fill-mode: paused | running;

  • paused ： 规定动画已暂停
  • running ： 规定动画正在播放,默认值

利用:hover或者Javascript来控制动画的暂停或播放

.box{
	-webkit-animation-name: circle;
	        animation-name: circle;
	-webkit-animation-duration: 2s;
	        animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-delay: 2s;
	        animation-delay: 2s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	-webkit-animation-play-state: paused;
	        animation-play-state: paused;	    
}

.box:hover{
	-webkit-animation-play-state: running;
	        animation-play-state: running;
}

@keyframes circle{
	from {transform: rotateX(0deg);  }
	to   {transform: rotateX(180deg);}
}

animation属性简写

语法

animation: name duration timing-function delay iteration-count direction;

.box{
	-webkit-animation: circle 10s ease-in-out 2s infinite alternate;
	        animation: circle 10s ease-in-out 2s infinite alternate;
}

@keyframes circle{
	from {transform: rotate(0deg);  }
	to   {transform: rotate(180deg);}
}

CSS3 @keyframes

关键帧，可以指定任何排列顺序来决定Animation动画变化的关键位置

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%

语法

@keyframes animationname {keyframes-selector {css-styles;}}

  • animationname 必需，定义动画的名称
  • keyframes-selector 必需。动画时长的百分比。 0-100% | from（与 0% 相同）| to（与 100% 相同）
  • css-styles 必需。一个或多个合法的 CSS 样式属性。
@-webkit-keyframes circle {
    form   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }
}
@keyframes circle {
    form   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }
}

动画性能优化 will-change

  • position-fixed代替background-attachment
  • 带图片的元素放在伪元素中
  • 巧用will-change
.front::before {
    content: '';
    position: fixed; // 代替background-attachment
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    background: url(/img/front/mm.jpg) no-repeat center center;
    background-size: cover;
    will-change: transform; // 创建新的渲染层
    z-index: -1;
}

作用

提前通知浏览器元素将要做什么动作，让浏览器提前准备合适的优化设置

目标

增强页面渲染性能

语法

/* 关键字值 */
will-change: auto;
will-change: scroll-position;   /*将要改变元素的滚动位置*/
will-change: contents;			/*将要改变元素的内容*/
will-change: transform;        /* <custom-ident>示例 ，明确指定将要改变的属性与给定的名称*/
will-change: opacity;          /* <custom-ident>示例 */
will-change: left, top;        /* 两个<animateable-feature>示例 ，可动画的一些特殊值*/

/* 全局值 */
will-change: inherit;
will-change: initial;
will-change: unset;

就目前而言，使用的基本上都是：

.example {
  will-change: transform;
}

使用注意事项

will-change的使用要谨慎，遵循最小化影响原则，所以，上面的例子，才使用伪元素去搞，独立渲染

可以让父元素hover的时候，声明will-change，这样，移出的时候就会自动remove，触发的范围基本上是有效元素范围。

.will-change-parent:hover .will-change {
  will-change: transform;
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

如果使用JS添加will-change, 事件或动画完毕，一定要及时remove. 比方说点击某个按钮，其他某个元素进行动画。点击按钮(click)，要先按下(mousedown)再抬起才出发。因此，可以mousedown时候打声招呼, 动画结束自带回调，于是:

dom.onmousedown = function() {
    target.style.willChange = 'transform';
};
dom.onclick = function() {
    // target动画...
};
target.onanimationend = function() {
    // 动画结束回调，移除will-change
    this.style.willChange = 'auto';
};

上一篇 学习CSS3--CSS3过渡

下一篇 复习JavaScript--JavaScript语法

留言

目录