css3 动画（四）animation.css 源码分析

ThreeWords 发布于2019-08-29 16:05 / 1601人阅读

摘要：前言上一篇动画三简介中只是简单的介绍了一下的子属性，并没有真正的使用。在本篇中，通过阅读这个的动画库，来加深对的属性的理解。是一个具有非常多的动画效果的动画库。动画效果演示用法加上基础类以及动画类，就会有闪烁的动画效果。

前言

上一篇 css3 动画（三）animation 简介中只是简单的介绍了一下 animation 的子属性，并没有真正的使用。在本篇中，通过阅读 animate.css这个 css 的动画库，来加深对
css3 的 animation 属性的理解。

animate.css

animate.css 是一个具有非常多的动画效果的 css 动画库。动画效果演示

用法

Example

加上基础类 animated 以及动画类 flash，就会有 “闪烁” 的动画效果。

动画分类

通过查看演示，可以看到该动画库的动画类型分为 14 类：

Attention Seekers

Bouncing Entrances

Bouncing Exits

Fading Entrances

Fading Exits

Flippers

Lightspeed

Rotating Entrances

Rotating Exits

Sliding Entrances

Sliding Exits

Specials

Zooming Entrances

Zooming Exits

在 animate.css 的源码目录中，也根据其分类分为了 14 个文件夹：

_base.css 基础类

首先看 _base.css 中的基础类：

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  animation-delay: 1s;
}

.animated.delay-2s {
  animation-delay: 2s;
}

.animated.delay-3s {
  animation-delay: 3s;
}

.animated.delay-4s {
  animation-delay: 4s;
}

.animated.delay-5s {
  animation-delay: 5s;
}

可以看到：
.animate 基础类设置了动画的两个子属性：animation-duration 和 animation-fill-mode。其值分别为 1s 和 both。animation-fill-mode 详解

.animate.infinite 基础类设置了动画的播放次数为无限次

.animated.delay-ns 基础类设置了动画的延时

示例：flash 动画源码

然后，我们来看一个动画例子的源码：flash.css

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
}

在 flash.css 中，首先定义了名为 flash 的关键帧的序列：

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

在 0%、50%、100% 关键帧中，其样式 opacity 为 0
在 25%、75% 关键帧中，其样式 opacity 为 1

然后，下面有 .flash 类，使用了 flash 作为 animation-name 属性的值，flash 即为上面定义关键帧的名称

所以，通过添加 flash 类，就可以使元素具有 “闪烁” 的动画效果！

总结

通过上面实例的一个 flash 动画源码的阅读，加深了对 css3 animation 属性的使用。

GPU云服务器云服务器 css3动画高性能css3动画源码分析 nginx源码分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113512.html

css3 动画（三）animation 简介

摘要：默认，只执行一次动画动画名称，该名称为动画关键帧的名称。默认如何理解表示的是关键帧的名称，那么如何定义关键帧呢使用。语法名称关键帧样式或总结其实也并不复杂，其有个子属性。下一篇动画三源码解析通过阅读动画库的源码，来提高对中属性的认识前言上一篇中，总结了一下 transition 以及 cubic-bezier()。本篇中，将介绍 css3 动画中的更为灵活的动画属性：animati...

itvincent 2019-08-29 16:05 评论0 收藏0
css:transform,transition,animation总结

摘要：等同于贝塞尔曲线元素样式从初始状态过渡到终止状态速度是恒速。等同于贝塞尔曲线提供了类似关键帧控制的动画效果，通过属性实现。名称说明用来指定一个关键帧动画的名称，这个动画名必须对应一个规则。 1. transform 2d 名称说明 transform 变形功能 transform-orign 指定变换起点 1.1 transform的属性值名称说明参数 ...

sevi_stuo 2019-08-30 15:53 评论0 收藏0
CSS3 Transition, transform 和 animation 介绍

摘要：和介绍允许的属性值在一定的时间区间内平滑地过渡，语法如下用来指定执行效果的属性，可以为或者特定的属性。缩放的取值范围是，小于时表示缩小，反之表示放大。 CSS3 提供了transition 过渡、transform 变换和animation 动画来实现页面中的一些样式转化，这篇文章会对这几个属性做简单的介绍，然后比较一下 CSS3 动画和 JS 动画哪个性能更好。 Transitio...

wums 2019-08-22 11:50 评论0 收藏0
css面试题

摘要：目前，除了及更早版本外，所有浏览器均已支持。视口单位中的视口，桌面端指的是浏览器的可视区域移动端指的就是中的。根据规范，视口单位主要包括以下个等于视口宽度的。等于视口高度的。生成相对定位的元素，相对于其正常位置进行定位。 css面试题 css垂直居中的方法有哪些？已知高度的块级子元素，采用绝对定位和负边距.container { position: relative;}.verti...

longmon 2019-08-23 18:30 评论0 收藏0
A Beginner’s Introduction to CSS Animation中文版

摘要：示例或者简写上面的代码将实现一个元素不透明度的过度，从到。接着，给添加默认的样式定义现在，我们来创建一个有五个阶段的应用动画定义完我们的动画，我们还需要将动画应用到上现在动画的状态是动画名称为。现在越来越多的网站正在使用动画，无论是以GIF，SVG，WebGL，背景视频等形式。当正确使用时，网络上的动画带来生机和交互性，为用户增添了额外的反馈和体验。在本教程中，我将向您介绍CSS...

_DangJin 2019-08-29 12:26 评论0 收藏0