注:原文有较大改动

使用keyframesanimation属性,例如timing,  delayplay stateanimation-countiteration countdirection,  fill mode以及will-change等等 创造动画魔法

作为设计者、开发人员,除去精简的用户界面,更好的页面加载速度外,我们发现通过给界面添加动画效果,可以增加用户与网站的互动率,能够更好的吸引用户使用我们的产品。CSS3相对于原先的基于Javascript操作Dom实现动画的方式而已,CSS如今拥有更好的兼容性。所以本文就介绍CSS动画的一些基本知识。

keyframes

通过逐渐改变对象的运动状态的方式,我们可以将动画应用到到页面上的任何对象上。然而利用keyframes特性,我们便可以控制动画对象每一阶段的状态。

 @keyframes pulse {
0% {
transform: scale3d(1, 1, 1);
}
50%{
transform: scale3d(1.1, 1.1, 1.1);
}
100% {
transform: scale3d(1, 1, 1);
}
}

我们尝试思考以下这个例子:

  1. 动画名(Animation name): pulse
  2. 3个步骤:0%(state time), 50%(x time), 100% (end time)
  3. CSS值:scale3d(x, y, z)

当动画已经在(@keyframes)中定义好后,我们可以控制以下几样东西:

  • 动画的持续时间
  • 延迟多久动画开始
  • 动画的重复频率
  • 动画的方向

以下是实现示例:

 button {
animation-duration: 1s;
animation-name: pulse;
}

在以上示例中,我们给一个Button添加了动画pulse,定义了持续时长(duration)为1秒。 如果我们调整了这个持续时长属性的值,则可以看到这个Button就会出现一个还不错的效果。如图:

Demo地址:http://codepen.io/phyesix/pen/EZebOJ

2. 动画时间(Animation Timing)

动画时间函数是用于决定我们希望动画在移动周期内要进行加速和减速效果的时间。所以,为了实现这个效果,我们需要定义动画将要移动的速度。这里有一些我们常见的动画时间属性的选项值,例如:initialinheriteaseease-inease-out, 还有linear等等。

引用:https://i.stack.imgur.com/qyvON.png

动画时间函数:左(ease)右(linear)

以上的选项是很直接的调整动画的方法。然而通过自定义贝塞尔曲线的值,可以满足你具体的动画时间需求。

关于如何使用贝塞尔曲线的方法我们可以通过查看Mozilla的开发者网站

3. 动画延时 (Animation Delay)

动画延时常常应用于当我们需要对动画进行的延时操作的时候。即当某个动画被触发了,然后延时1S后开始执行。例如: 我们对“Send FeedBack"按钮添加了延时处理:

动画延时:左(1秒), 右(2秒)

4. 动画播放状态(Animation Play State)

动画播放状态常常用来控制动画是否需要暂停或者继续。

5. 动画的循环次数

循环次数指单位时间内,动画所重复执行的次数。

6. 动画方向(Animation Direction)

动画方向是用于指定动画对象的移动方向。例如是从尺寸0%到100%,还是从100%到%0,又或者是从0%到100%的大小,然后反转从100%到0%。

  • 顺序的(Normal): 指动画从0%到100%顺序执行
  • 倒序(Reverse): 动画从100%作为起点位置开始到0%倒序执行
  • 交替(Alernate): 动画先从0%变化到100%,然后从100%返回到0%
  • 反转-交替(Alternate-reverse): 动画从100%到0%倒序, 然后又从0%前进到100%正序执行Demo地址:http://codepen.io/phyesix/pen/apaYXr

7. 动画填充模式(Animation Fill Mode)

我们需要知道,当动画执行结束后,在动画执行期间给对象元素所添加的样式并不是永久的。这个样式仅仅是在动画期间被应用然后即被移除。关于动画应用的模式,我们可以使用以下属性值来表示:

  • 向后(Backward): 在动画处于0%时,样式会被应用到元素上
  • 向前(Forward): 在动画处于100%时,样式会被应用到元素上
  • 兼得(Both): 在动画开始和结束时样式会被应用
  • 初始值(Initial): 设置这个属性为默认值

Demo地址:http://codepen.io/phyesix/pen/PWgqLj

8. 将要改变(Will-Change)

非常感谢Will-Change特性。可以通过Will-Change属性,我们可以在动画执行前,提前通知浏览器上我们将要执行动画的对象元素。这就允许了我们可以一次性的对元素的多个属性进行动画操作。从而减少大部分动画执行期间潜在的性能损耗问题。

button {
will-change: transform, opacity;
}

下面的代码我声明了将会对所有元素的所有属性执行动画,即使是非动画区域。

*, *::before, *::after {
will-change: all
}

很显然,上面的这种使用方法会带来一些没有必要的系统资源的占用和性能损耗。 所以,我们应该尽可能在所需要的元素上使用CSS动画。更多关于Will-Change的特性的信息请看:https://dev.opera.com/articles/css-will-change-property/

4个超级属性

在keyframes里,我们几乎可以使用任何的CSS属性。在如今的大部分浏览器中,你可以放心的使用positionscalerotationopacity等等属性值。并且这4个属性可以给动画效果带来更高效,更好的性能表现。

引用:https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

结语

以上列举的都是些实现CSS动画的基本属性,一旦了解了这些基础,从而更方便的开始进行动画创作。 关于很多你可能感兴趣的CSS动画应用和实例资源,可以查看Codepen的CSS动画单元。

翻译地址:http://imziv.com/blog/article/read.htm?id=82

原文链接:https://stories.jotform.com/how-to-use-css-animations-like-a-pro-dfacc1e97338#.tgenux32r

完整学习使用CSS动画【翻译】的更多相关文章

  1. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

  2. CSS基础学习 17.CSS动画

  3. css动画-音频跳动

    css动画-音频跳动 ---------------------------------------------------------------------------- ------------ ...

  4. 学习animate.css包含了一组炫酷、有趣、跨浏览器的动画

    1.animate.css包含了一组炫酷.有趣.跨浏览器的动画,可以在你的项目中直接使用. 第一步:引入animate.css样式文件或者引入某些平台的CDN文件: <head> < ...

  5. amazeui学习笔记--css(常用组件15)--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  6. web前端学习(三)css学习笔记部分(5)-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  7. 前端深入之css篇丨2020年前,彻底掌握css动画【transition】

    写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...

  8. 前端深入之css篇丨2020年前,彻底掌握css动画【animation】

    写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...

  9. 前端深入之css篇丨2020年前,彻底掌握css动画

    马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了 ...

随机推荐

  1. nginx安装和配置

    一.安装:yum install nginx service nginx restart/start/check/status/... 二.配置:官网文档 http://nginx.org/en/do ...

  2. sqlserver的CTE实现递归查询

    --递归查询 IF OBJECT_ID('DiGui','U') IS NOT NULL DROP TABLE DiGui CREATE TABLE DiGui( Id ), ParentId ) ) ...

  3. 剖析ASP.NET Core(Part 2)- AddMvc(译)

    原文:https://www.stevejgordon.co.uk/asp-net-core-mvc-anatomy-addmvccore发布于:2017年3月环境:ASP.NET Core 1.1 ...

  4. 解决安卓TextView高度和textSize大小不一致问题

    在设计安卓界面的时候我发现一个TextView在布局上占用的高度和属性textSize的大小不一样,要比textSize要来的大(比如textSize="12dp",实际的高度大概 ...

  5. Kali 2.0安装与使用指南

    阅读目录 (1)如果坚持用系统自带浏览器,其汉化方法: (2)如果有强迫症删了系统自带浏览器,然后重新安装了一个新的火狐可能遇到的问题: (3)如果你有火狐账号,你登陆了发现书签和插件没有同步? (4 ...

  6. 流畅的python第四章文本和字节序列学习记录

    字符问题 把码位转化成字节序列的过程是编码,把字节序列转化成码位的过程是解码 把unicode字符串当成人类可读的文本,码位当成机器可读的, 将字节序列编程人类可读是解码,把字符串编码成字节序列是编码 ...

  7. java中return的作用

    脑补一下基础的东西,return的用法. return的常用作用有以下两种第一种用法是返回参数所用的关键字,假如一个有返回值的方法执行完了之后需要返回一个参数,示例: public string fu ...

  8. Maven仓库设置代理

    线上服务器是没有外网环境的, 添加代理配置如下: <settings>     ...    <proxies>       <proxy>          &l ...

  9. 把mysql的数据导出成txt

    把mysql的数据导出成txt select a from b into outfile '/sqlfile/a.txt'; my.ini里需要设置secure_file_priv = d:/sqlf ...

  10. Java命令学习系列(2):Jstack

    转载:http://www.importnew.com/18176.html 原文出处: Hollis(@Hollis_Chuang) jstack是java虚拟机自带的一种堆栈跟踪工具. 功能 js ...