CSS3连接动画&关键帧动画&animate.css动画库详解

给列表项目添加动画

2015/05/08 · CSS,
HTML5,
JavaScript · 1
评论 ·
动画

本文由 伯乐在线 –
刘健超-J.c
翻译,周进林
校稿。未经许可,禁止转载!
英文出处:cssanimation.rocks。欢迎加入翻译组。

当网页某部分发生改变时,添加一些动画有利于让用户知道发生了什么事情。因为动画能预告新内容的到达,或者让用户知道信息被移除。在这篇文章里,将会看到如何运用动画帮助新内容的引进,例如显示或隐藏列表里的项目。

图片 1

(可在原文查看效果)

Dependencies(依赖的js库):

本文并非原创,属于摘抄性质,并有个人的加工。

引进内容

动画有个很好的用处,它能够让访客知道你的网站内容在何时发生了改动。当添加或删除内容而没有任何动画进行过渡时,内容的突然改变会让用户感到困惑。而通过添加细微的动画就能避免这种情况发生,并且有助于“宣布”有东西将要离开或引进页面。

以下是一个通过添加或删除操作来管理列表内容的例子。大多数动画能用于其它类型的内容。如果你发现它们是有用的,或有其它想法想添加进来,那么请 联系我们,我们很乐意听听你的想法。

 

一、过渡动画

过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。
所谓的状态就是指大小、位置、颜色、变形(transform)等等这些属性。

Note:不是所有属性都能过渡,只有属性具有一个中间点值才具备过渡效果。
点击查看完整列表。

css过渡只能定义首和尾两个状态,所以是最简单的一种动画。
注释:Internet Explorer 9 以及更早版本的IE浏览器不支持 transition
属性。

编写HTML代码

在一开始,准备好一个已提前填充好的列表和一个可以为该列表添加新项目的按钮。

XHTML

<ul id=”list”> <li class=”show”>List item</li> <li
class=”show”>List item</li> </ul> <button
id=”add-to-list”>Add a list item</button>

1
2
3
4
5
<ul id="list">
<li class="show">List item</li>
<li class="show">List item</li>
</ul>
<button id="add-to-list">Add a list item</button>

但有一些地方需要注意。首先,在HTML代码里有两个 ID。一般来说,我们不会用
ID 来设置样式,因为它们的唯一性会引入一些问题。然而,它们会在使用
JavaScript 时提供了便利性。

初始列表项目有类名
“show”,正因为这是类名,我们将会在后面通过它为元素添加动画效果。

bower.json

如何在项目中正确、熟练地应用transition动画?

一些 JavaScript 代码

为了实现演示里的动画,将会编写一些 JavaScript
代码来添加新列表项目,然后为新添加列表项目添加类名
“show”,以至动画能够发生。使用这两个步骤的理由是,如果列表项目直接以可见的状态添加进来,它们就没有任何过渡时间而直接发生了。

我们打算在 li 元素上使用动画效果,但这将会让通过覆盖样式来添加其它删除元素的动画效果,变得更加困难。

JavaScript

/* * Add items to a list – from cssanimation.rocks/list-items/ */
document.getElementById(‘add-to-list’).onclick = function() { var list =
document.getElementById(‘list’); var newLI =
document.createElement(‘li’); newLI.innerHTML = ‘A new item’;
list.appendChild(newLI); setTimeout(function() { newLI.className =
newLI.className + ” show”; }, 10); }

1
2
3
4
5
6
7
8
9
10
11
12
/*
* Add items to a list – from cssanimation.rocks/list-items/
*/
document.getElementById(‘add-to-list’).onclick = function() {
  var list = document.getElementById(‘list’);
  var newLI = document.createElement(‘li’);
  newLI.innerHTML = ‘A new item’;
  list.appendChild(newLI);
  setTimeout(function() {
    newLI.className = newLI.className + " show";
  }, 10);
}

 

第一步:在目标元素的样式声明中定义元素的初始状态,然后在同一声明中用 transition 属性配置动画的各种参数。

可定义的参数有

  • transition-property:规定对哪个属性进行过渡。
  • transition-duration:定义过渡的时间,默认是0。
  • transition-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 之间的数值。
  • transition-delay:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0。

注意:要在同一代码块中定义元素初始状态(样式),添加transition属性。
如果想要同时过渡多个属性,可以用逗号隔开。

图片 2

无动画

在最基本的效果中,我们能写一些 CSS 代码显示列表项目。因为添加类名 show
让它们可见,所以删掉类名 show 也能导致它们消失。

CSS

li { list-style: none; background: #d1703c; color: #fff; height: 0;
line-height: 2em; margin: 0; padding: 0 0.5em; overflow: hidden; width:
10em; } li.show { height: 2em; margin: 2px 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
li {
  list-style: none;
  background: #d1703c;
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  overflow: hidden;
  width: 10em;
}
 
li.show {
  height: 2em;
  margin: 2px 0;
}

这些样式将 li 设置为一个没有项目符合、height 为 0、margin 为 0和
overflow 为 hidden 的矩形。这样做是为了直到添加类名
show,它们才会出现而变得可见。

类名 show 应用了 height 和
margin。因为我们至今还没使用动画,所以列表项目会直接出现在页面,像下面那样。当然你也可以点击列表项目,让它们消失。

图片 1

(可在原文查看效果)

复制代码

第二步:改变元素的状态。

为目标元素添加伪类或添加声明了最终状态的类。
使用 transtion
属性只是规定了要如何去过渡,要想让动画发生,还得要有元素状态的改变。如何改变元素状态呢,当然就是在css中给这个元素定义一个类(:hover等伪类也可以),这个类描述的是过渡动画结束时元素的状态。

除了使用hover等系统提供的伪类外,我们也可以随意的定义自己的类,然后想要过渡时就通过js把类加到元素上面。

注意:单纯的代码不会触发任何过渡操作,需要通过用户的行为(如点击,悬浮等)触发。可触发的方式有::hover
:focus :checked 媒体查询触发 JavaScript触发。

示例1:

图片 4

示例2:
当鼠标悬停在img元素上时,改变img元素的尺寸。改变的整个过程是平滑过渡的,不是快速、突兀的。

img {
    height:15px;  /*初始值*/
    width:15px;
    transition:1s1s height; /*过渡*/
}
img:hover {
    height:450px; /*最终值*/
    width:450px;
}

淡入淡出

作为第一个动画,我们将会添加一个简单的淡入淡出效果。相对之前的项目列表,该列表项目多了渐变效果。虽然在视觉上看起来仍然有一点笨重,但这有利于让浏览者有更长的时间去注意有东西正在变化。

图片 1

(可在原文查看效果)

因为要在已创建 CSS
片段上添加效果。所以为了在列表上应用这个效果,需要在包围 li
的容器上添加类名 fade

CSS

.fade li { transition: all 0.4s ease-out; opacity: 0; height: 2em; }
.fade li.show { opacity: 1; }

1
2
3
4
5
6
7
8
.fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
  height: 2em;
}
.fade li.show {
  opacity: 1;
}

{

过渡动画的局限性

transition的优点在于简单易用,但是它有几个很大的局限。
(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。

滑下&淡入淡出

每次添加或删除一个项目列表都会很突然,这导致了不和谐的效果。那就让我们通过调整高度来创建一个更加流畅的滑动效果。

图片 1

(可在原文查看效果)

这里与上面类名 fade 唯一不同的是 height:2em 被移除掉了。因为类名
show 已包含了一个高度(继承自第一个CSS片段),这样高度就会自动过渡了。

CSS

.slide-fade li { transition: all 0.4s ease-out; opacity: 0; }
.slide-fade li.show { opacity: 1; }

1
2
3
4
5
6
7
.slide-fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
}
.slide-fade li.show {
  opacity: 1;
}

  “name”: “angular-seed”,

二、关键帧动画

不同于过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态,或者用关键帧的话来说,过渡动画只能定义第一帧和最后一帧这两个关键帧,而关键帧动画则可以定义任意多的关键帧,因而能实现更复杂的动画效果。

注释:Internet Explorer 9 以及更早的IE版本不支持 animation 属性。

旋转进来

除了淡入淡出和滑动效果,还能更进一步地添加一些 3D 效果。浏览器不止能在 X
或 Y 轴上变换元素,还具有深度的场景( Z 轴)。

图片 1

(可在原文查看效果)

为了设置这个效果,需要定义一个 section 容器作为 3D 过渡的舞台。通过给
perspective 赋值就可以做到。

CSS 的 perspective
代表场景的深度。一个较低的数值意味着近视角,是一个极端的角度。所以这值得你通过设置不同的值来找到一个合适的值。

CSS

.swing { perspective: 100px; }

1
2
3
.swing {
  perspective: 100px;
}

下一步是设置 li 元素在这个舞台里的变形。我们将会使用 opacity
创建淡入淡出效果作为前奏,然后为在舞台上的 li 添加 transform
进行旋转。

CSS

.swing li { opacity: 0; transform: rotateX(-90deg); transition: all 0.5s
cubic-bezier(.36,-0.64,.34,1.76); } .swing li.show { opacity: 1;
transform: none; transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

1
2
3
4
5
6
7
8
9
10
11
.swing li {
  opacity: 0;
  transform: rotateX(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}
 
.swing li.show {
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

在这个例子中,让 li 绕X 轴向后旋转 90 度作为初始状态。当添加类名
show 时,它的 transform 被设置为
none,这就能让它在舞台上进行过渡了。为了给它旋转效果,我使用了
cubic-bezier 时间函数。

  “description”: “A starter project for AngularJS”,

如何在项目中正确、熟练地应用animation动画?

animation就相当于用@keyframes预先定义好元素在整个过渡过程中将要经历的各个状态,然后再通过animation属性将这些状态一次性赋给该元素。

侧面旋转

现在我们只要稍稍调整这个效果,就能十分容易地创建不同的设计。下面这个例子,是让项目列表在侧面旋转。

图片 1

(可在原文查看效果)

要创建这个效果,我们只需改变旋转轴。

CSS

.swing li { opacity: 0; transform: rotateY(-90deg); transition: all 0.5s
cubic-bezier(.36,-0.64,.34,1.76); }

1
2
3
4
5
.swing li {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

我们已经把 rotateX 改成 rotateY 了。

  “version”: “0.0.0”,

第一步:通过类似Flash动画中的帧来声明一个动画。

关键帧动画的定义方式也比较特殊,它使用了一个关键字 @keyframes
来定义动画。具体格式为:

@keyframes 动画名称 {    时间点 {元素状态}    时间点 {元素状态}    …}

一般来说,0%和100%这两个关键帧是必须要定义的。0%可以由from代替,100%可以由to代替。

浏览器内核前缀和浏览器测试

为了可读性,上面那些代码都没有包含任何前缀。在这里,我强烈推荐添加前缀,以支持那些需要
-webkit
或其他前缀的浏览器。而我使用了 Autoprefixer 来解决这个问题。

正因为这些动画都是在基本的 show/hide
上构建的,所以它们在不支持这些动画的浏览器上优雅地回退。在各种各样的设备和浏览器上进行测试是重要的,但大多数现代浏览器都能支持这些动画。

打赏支持我翻译更多好文章,谢谢!

打赏译者

  “homepage”: “”,

第二步:在目标元素的样式声明中使用animation属性调用关键帧声明的动画。

现在我们知道了怎么去定义一个关键帧动画了,那怎么去实现这个动画呢?其实很简单,只要把这个动画绑定到某个要进行动画的元素上就行了。把动画绑定到元素上,我们可以使用animation属性。

可配置的参数有

  • animation-name:none为默认值,将没有任何动画效果,其可以用来覆盖任何动画。
  • animation-duration:默认值为0s,意味着动画周期为0s,也就是没有任何动画效果。
  • animation-timing-function:与transition-timing-function一样。
  • animation-delay:在开始执行动画时需要等待的时间。
  • animation-iteration-count:定义动画的播放次数,默认为1,如果为infinite,则无限次循环播放。
  • animation-direction:默认为nomal,每次循环都是向前播放,(0-100)。另一个值为alternate,动画播放为偶数次则向前播放,如果为基数词就反方向播放。
  • animation-state:默认为running,播放,paused,暂停。
  • animation-fill-mode:定义动画开始之前和结束之后发生的操作。
  • none(默认值),动画结束时回到动画没开始时的状态;
  • forwards,动画结束后继续应用最后关键帧的位置,即保存在结束状态;
  • backwards,让动画回到第一帧的状态;
  • both:轮流应用forwards和backwards规则;

注意:只要把定义好的动画绑定到元素上,就能实现关键帧动画了,而不是像第一种过渡动画那样,需要一个状态的改变才能触发动画。
animation属性到目前为止得到了大多数浏览器的支持,但是,需要添加浏览器前缀!另外,@keyframes必须要加webkit前缀。

示例:

div:hover {
    -webkit-animation:1s changeColor; /*调用动画*/
    animation:1s changeColor;
}
@-webkit-keyframes changeColor { /*声明动画*/
    0% {background:#c00;}
    50%{background:orange;}
    100%{background:yellowgreen;}
}
@keyframes changeColor {
    0%{background:#c00;}
    50%{background:orange;}
    100%{background:yellowgreen;}
}

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 9
图片 10

赞 收藏 1
评论

  “license”: “MIT”,

过渡动画与关键帧动画的区别

animation属性类似于transition,他们都是随着时间变化而改变元素的属性值,其主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。

关于作者:刘健超-J.c

图片 11

前端,在路上…
个人主页 ·
我的文章 ·
19 ·
    

图片 12

  “private”: true,

三、animate.css动画库

animate.css是一个css3动画库,可以到github上去下载,里面预设了很多种常用的动画,使用也很简单,因为它是把不同的动画绑定到了不同的类里,所以我们想要使用哪种动画的时候,只需要简单的把那个相应的类添加到元素上就行了。

该库大致包含如下这些动画效果

  1. bounce(跳动)、flash(闪光)、pulse(脉冲)、rubber
    band(橡皮筋)、shake(抖动)、swing(摇摆)、wobble(摇摆不定)
  2. fade(淡入或淡出)
  3. flip(翻转)
  4. rotate(旋转)
  5. slide(滑动)
  6. zoom(放大或缩小)

  “dependencies”: {

如何在项目中正确、熟练地应用animate动画库?

(1):在head中引入animate.min.css文件。
注:由于animate.min.css默认包含所有的动画效果。因此当我们仅使用其中的几个动画效果时,我们最好使用gulp构建仅包含我们需求的animate.min.css,这样可以避免我们引入的animate.min.css文件体积过大。

    “angular”: “1.2.x”,

如何使用gulp构建符合我们需求的animate.min.css?

第一步:将整个animate.css项目下载下来,作为生产环境的依赖

npm install animate.css --save

第二步:进入animate.css项目根目录下

$cd path/to/animate.css/

第三步:加载dev依赖

npm install 

第四步:根据实际需要修改animate-config.json文件
例如:我们只需要这两个动画效果:bounceIn和bounceOut。

{
    "bouncing_entrances": [
        "bounceIn"
    ],
    "bouncing_exits": [
        "bounceOut"
    ]
}

最后一步:进入animate.css项目下,运行gulp任务:gulp
default,生成新的animate.min.css覆盖默认的animate.min.css。

(2)你想要哪个元素进行动画,就给那个元素添加上animated类
以及特定的动画类名,animated是每个要进行动画的元素都必须要添加的类。

图片 13

你也可以在动画完成后,把动画类移除,以便可以再次进行同一个动画。

图片 14

至于动画的配置参数,比如动画持续时间,动画的执行次数等等,你可以在你的的元素上自行定义,覆盖掉animate.min.css里面所定义的就行了。注意添加浏览器前缀。

图片 15

参考资料1
参考资料2

    “angular-mocks”: “~1.2.x”,

    “bootstrap”: “~3.1.1”,

    “angular-route”: “~1.2.x”,

    “angular-resource”: “~1.2.x”,

    “jquery”: “1.10.2”,

    “angular-animate”: “~1.2.x”

  }

}

复制代码

注:angular-animate需要单独下载,这里使用命令npm install或者 bower
install即可下载 angular-animate.js

 

   如果需要更多动画可以结合Jquery中的动画去实现需求.

 

angularjs中是如何实现动画的?
可以参考API:

 

Template(模板)

 

首先,引入angular-animate.js文件,如下:

 

复制代码

  <!– for CSS Transitions and/or Keyframe Animations –>

  <link rel=”stylesheet” href=”css/animations.css”>

  …

  <!– jQuery is used for JavaScript animations (include this before
angular.js) –>

  <script src=”bower_components/jquery/jquery.js”></script>

  …

  <!– required module to enable animation support in AngularJS
–>

  <script
src=”bower_components/angular-animate/angular-animate.js”></script>

 

  <!– for JavaScript Animations –>

  <script src=”js/animations.js”></script>

 

复制代码

其API可以参考:ngAnimate

 

Module & Animations(组件和动画)

 

app/js/animations.js.

 

angular.module(‘phonecatAnimations’, [‘ngAnimate’]);

  // …

  // this module will later be used to define animations

  // …

app/js/app.js

 

复制代码

// …

angular.module(‘phonecatApp’, [

  ‘ngRoute’,

 

  ‘phonecatAnimations’,

  ‘phonecatControllers’,

  ‘phonecatFilters’,

  ‘phonecatServices’,

]);

// …

复制代码

现在,动画效果已经被唤醒了.

 

Animating ngRepeat with CSS Transition
Animations(使用CSS过渡效果去实现动画效果)

 

复制代码

<ul class=”phones”>

  <li ng-repeat=”phone in phones | filter:query | orderBy:orderProp”

      class=”thumbnail phone-listing”>

    <a href=”#/phones/{{phone.id}}” class=”thumb”><img
ng-src=”{{phone.imageUrl}}”></a>

    <a href=”#/phones/{{phone.id}}”>{{phone.name}}</a>

    <p>{{phone.snippet}}</p>

  </li>

</ul>

发表评论

电子邮件地址不会被公开。 必填项已用*标注