CSS3(三)Animation 入门详解

原创 2018年04月17日 16:07:44

Animation


前言

好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。

下面是七喜的官方主页,它就是很好的富交互样例。鼠标移动到导航栏,就会播放多种动效,给用户一种酷炫的体验。我觉得用户体验,才是前端工程师更加关注的问题,而不是一味追求Javascript的编码技能。

这里写图片描述
七喜官方网站


Animation 组成

CSS3 Animation 是由三部分组成。


1.关键帧(@keyframes)

  • 关键帧(keyframes) - 定义动画在不同阶段的状态。
  • 动画属性(properties) - 决定动画的播放时长,播放次数,以及用何种函数式去播放动画等。(可以类比音视频播放器)
  • css属性 - 就是css元素不同关键帧下的状态。

下面我们来看一个例子。
创建了一个@keyframes命名为dropdown。

  • 关键帧主要分为3个阶段,0%、50%、100%。
  • 动画播放时长为6s、循环播放(infinite)、以linear方式进行播放。
  • 修改的元素属性为margin-top
.list div:first-child {
 animation: dropdown 8s linear infinite;
}
@keyframes dropdown {
    0% { margin-top: 0px;}
   /** 暂停效果 */
   10% { margin-top: 0px;}
   50% { margin-top: -100px;}
   60% { margin-top: -100px;}
   90% { margin-top: -200px;}
  100% { margin-top: -200px;}
}

这里写图片描述

查看源码
MDN参考网站


需要注意!当属性的个数不确定时:

当我们在定义不同关键帧,元素属性的个数是一个变化的值。
如果一个关键帧的属性,没有出现在其他关键帧的时候,那么这些属性将会使用上一帧的默认值。
区别在于,缺省之后的渐变效果是不会出现的。比如下面两种写法,

  @keyframes dropdown {
    0% { top: 0; }
    30% { top: 300px; }
    50% { top: 150px; }
    70% { top: 300px; }
    80% { top: 0px;  left:-200px;}
    100% { top: 0px;  }
  }

这里写图片描述

  @keyframes dropdown {
    0% { top: 0; left:0px;}
    30% { top: 300px; left:0px;}
    50% { top: 150px; left:0px;}
    70% { top: 300px; left:0px;}
    80% { top: 0px;  left:-200px;}
    100% { top: 0px;  left:0px;}
  }

这里写图片描述


语法

@keyframes keyframes-name {
[ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]*
}
keyframes-name
帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。
from
等效于 0%.
to
等效于 100%.

2.动画属性

动画属性可以理解为播放器的相关功能,一个最基本的播放器应该具有:播放/暂停、播放时长、播放顺序(逆序/正序/交替播放)、循环次数等。
主要也分为两大点:

  • 指定播放的元素
  • 定义播放信息的配置
    这里写图片描述

动画源码

简写属性形式:

animation:
[animation-name] [animation-duration] // 动画的名称、持续时间
[animation-timing-function][animation-delay] // 关于时间的函数(properties/t)、延迟时间
[animation-iteration-count] [animation-direction] // 播放次数、播放顺序
[animation-fill-mode] [animation-play-state]; // 播放前或停止后设置相应样式、控制动画运行或暂停

MDN参考文档

1.时间函数(animation-timing-function)

animation-timing-function属性定义了动画的播放速度曲线。
可选配置参数为:
ease
ease-in
ease-out
ease-in-out
linear
cubic-bezier(number, number, number, number)
这里写图片描述
动画源码
默认值,如果没有显示写调用的函数,则默认为ease。

2.动画方向(animation-direction)

animation-direction属性表示CSS动画是否反向播放。
可选配置参数为:

single-animation-direction = normal | reverse | alternate | alternate-reverse

  • animation-direction: normal 正序播放
  • animation-direction: reverse 倒序播放
  • animation-direction: alternate 交替播放
  • animation-direction: alternate-reverse 反向交替播放
  • animation-direction: normal, reverse
  • animation-direction: alternate, reverse, normal

这里写图片描述

动画源码
MDN文档

3.动画延迟(animation-delay)

animation-delay属性定义动画是从何时开始播放,即动画应用在元素上的到动画开始的这段时间的长度。
默认值0s,表示动画在该元素上后立即开始执行。
该值以秒(s)或者毫秒(ms)为单位。

4.动画迭代次数(animation-iteration-count)

animation-iteration-count该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。
默认值只播放一次。

single-animation-iteration-count = infinite | number

5.动画填充模式(animation-fill-mode)

animation-fill-mode是指给定动画播放前后应用元素的样式。

single-animation-fill-mode = none | forwards | backwards | both

  • animation-fill-mode: none 动画执行前后不改变任何样式
  • animation-fill-mode: forwards 保持目标动画最后一帧的样式
  • animation-fill-mode: backwards 保持目标动画第一帧的样式
  • animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。
6.动画播放状态(animation-timing-function)

animation-play-state: 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。
默认值为running

single-animation-timing-function = running | paused

  • running 动画正常播放
  • paused 动画暂停播放

分享一些CSS3动效网站:

Animation.css 一个很全的CSS3的动效库,可以尝试看看源码进行学习。
CreateJS 里面的特效做得也很不错,有很多酷炫的样例。
国外css3网页 布局很优雅的网站
USAToday 也是一个很酷炫的国外网站
peekabeat 很清爽的界面
heartbeat 交互很棒的网站
dances 貌似是交响乐的网站主页
reative 很有时代感的网站
animation 在线animation编辑器

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013243347/article/details/79976352

css3动画从入门到精通

什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3带来了圆角,半透明,阴影,渐变,多背景图等新的特征,轻...
  • xiangzhihong8
  • xiangzhihong8
  • 2016-08-26 11:40:53
  • 1893

深入理解CSS3 Animation 帧动画(step详解)

By Aaron: CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术。 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还...
  • Christine95
  • Christine95
  • 2016-01-06 18:58:58
  • 7179

CSS3动画Animation的八大属性

CSS3 动画Animation的8大属性animation复合属性。检索或设置对象所应用的动画特效。 如果有多个属性值时以”,”隔开,适用于所有元素,包含伪对象:after和:before1.an...
  • Summer_water
  • Summer_water
  • 2017-06-09 15:16:31
  • 1075

CSS3 Transform、Transition和Animation属性总结

本博文总结了css3中的动画三兄弟:transform、transition和animation,介绍了这三个属性的基本使用方法,通过使用这三个属性可以达到很炫酷的效果。...
  • u014607184
  • u014607184
  • 2016-07-02 16:37:55
  • 12586

css3 animation动画对应属性解释

CSS3动画,animation参数解释
  • jyy_12
  • jyy_12
  • 2015-03-01 22:08:36
  • 19575

css3动画的三种写法:

css3的三种写法:transform、animation+css、transition+css 第一种写法(transform): #cricle2:hover{ transform: tr...
  • Danialzhou
  • Danialzhou
  • 2016-09-18 17:29:54
  • 848

CSS3中translate、transform、translation和animation的区别

translate 移动 transform 变形(2d) translation 过渡 animation 动画
  • u011629818
  • u011629818
  • 2017-11-11 17:30:50
  • 603

【CSS3】transition过渡和animation动画

写在前面的话: 之前实习的时候,刚开始的第一个月就是在研究CSS3的动画,因为要做转盘抽奖活动,预研的时候,我是用Canvas来画的,当时为了一个问题“如何使用canvas让图片围绕中心点旋转”折...
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016-07-23 11:06:54
  • 25890

css3动画显示实现animation属性

css中经常使用的动画属性是animation,可以定制一些需要的动画属性: div { animation:mymove 5s infinite(无限播放动画); -webkit-animatio...
  • baidu_34449164
  • baidu_34449164
  • 2016-08-11 12:33:30
  • 962

Animation 动画详解

  • 2018年04月08日 13:53
  • 2.98MB
  • 下载
收藏助手
不良信息举报
您举报文章:CSS3(三)Animation 入门详解
举报原因:
原因补充:

(最多只允许输入30个字)