第一百三十二章 CSS 动画

大家有没有觉得前面讲的 CSS 过渡效果和 jQuery 的动画十分类似。事实上他们还是有很多区别的,但是在基础效果上,它们确实有些相似。

这时候不禁让人好奇,那 CSS 的动画又是什么样子的呢?

区别也不是太大,依旧是让 CSS 属性在不同的状态间平滑的过渡,但是它可以实现的效果更加复杂。,

首先过渡效果一定要有事件去触发,而动画效果可以不需要。

过渡效果执行一次就结束了,而动画效果可以设定执行的次数或者无限循环下去。

过渡有一个确定的执行方向,从当前样式到结果样式;而动画效果因为可以执行多次,所以在循环的过程中,变化的方向也可以进行改变。

上面是一些主要的区别,像循环以及方向性的问题,用其他方法也可以变相实现,但是不如 CSS 动画来得简单直接。

比如说制作一个加载中的等待动画,用 CSS 动画就非常合适。

以上是理论部分,下面我们来讲一讲实际的书写。因为动态效果的方向性都不确定,这时候我们就不能拿初始状态作为其中的一个默认值了,而是应该明确的给出初始和结束值。或者应该说没有真正的初始和结束,我们只是设定两个端点。

这时候我们需要用到一个特殊的对象 @keyframes,就是关键帧,注意它加了复数,所以这一个对象中可以包含动画中的所有关键帧。前面的 @ 我们在 @font-face 里面也见到过。这种是说我们写在 CSS 之中,用的也是基本的 CSS 语法,但是他们所做的事情和普通的 CSS 是有区别的。这个名字虽然放在选择器这里,但它并不是一个真正的选择器,所以前面加上一个 @,以示区分。

也就是说,我们的关键帧要和元素分开,单独去定义(意味着可以在多个元素上复用)。我们一个页面之中,可能不止需要一个(一种)动画效果,所以我们肯定要对这一组的关键帧进行命名。

@keyframes move_it {from { margin-left: -20%; }to { margin-left: 100%; }}

move_it 是这一系列关键帧的名字,后面我们需要使用的时候,就用这个名字来称呼它。

里面包含了两帧,名字是 from 和 to。分别是起始状态和结束状态,但在实际使用中,你们可以通过其他属性去控制,正向或者反向执行这个动画的变化,

就是这样一个格式,比普通的 CSS 稍微复杂一点,但是基础语法都是一样的。我们要描述的也就是开始时的 CSS 样式和结束时的 CSS 样式。

然后怎么去使用呢?我们只给需要进行动画的元素加上如下属性:

#miao {animation: 3s move_it;}

注意这里省略了该元素的其他样式。解释一下的话,就是告诉这个元素你具有动画,动画的时长是三秒,要做哪些变化呢?就是 move_it 这一组关键帧中所指定的变化。

我们也可以根据需求,通过一些事件的触发,动态的给元素增加和移除动画效果。

这些就是 CSS 动画最基础,最核心的内容。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百三十二章 CSS 动画

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏