CSS——loading动画

html-css019

CSS——loading动画,第1张

  由图可见,动画1中有三根竖线,在进行变长变短的高度变化以及线条的颜色变化,因此分为以下几个步骤:

  动画2中则与动画1排版略有不同:在动画区域内,有四个圆点,然后重复的放大缩小以及匀速旋转。因此步骤如下:

以上。

人的视觉暂留而形成,一帧一帧其实都是类似静止的图片

定义:

概念:

步骤:

用js更新样式的一般方法

以上方法的异同:

先看三种解析方式

(图片来自饥人谷)

参考文章 : https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count

过渡是一种动画,是从一种状态过渡到另一种状态,在过渡前,浏览器会计算页面的新页面结构以及完成重绘,过渡会自动双向运行,因此只要状态一反转,反向动画就会被运行。

如果我们不希望所有的元素属性受到影响,只希望作用到 box-shadow, transform ,那么可以改写为:

在指定带前缀的属性时, transition-property 本身也需要加上前缀。比如: transition: transform.25s 针对旧的版本,也就是WebKit浏览器,需要写成 -webkit-transition: -webkit-transform .25s ,即属性和作为值的属性均需要加上前缀,否则在旧版本的浏览器不起作用。