CSS3(4)---动画(animation)

之前有写过过渡:CSS3(2)--- 过渡(transition)

个人理解两者不同点在于

过渡 只能指定属性的 开始值结束值,然后在这两个属性值之间进行平滑过渡来实现动画效果,因此只能实现简单的动画效果。

动画 除了定义 开始值结束值,在这之间还可以定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。

一、动画语法

1、属性语法

语法格式

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

animation 属性是一个简写属性,用于设置六个动画属性

注意: 对于一个动画而言有两个属性是必须的: 动画名称规定完成动画所花费的时间

2、速度曲线属性

语法

animation-timing-function: linear;  /* 动画从头到尾的速度是相同的 */

对于动画的速度曲线属性,有以下属性值:

3、播放次数属性

语法

animation-iteration-count: n|infinite;   /* 播放n次 或者无限循环 */

对于播放次数属性,有以下属性值

4、轮流反向播放动画属性

语法

animation-direction: normal|alternate;  /* 正常播放 或者 轮流反向播放 */

对于轮流反向播放动画属性,有以下属性值

二、如何使用动画

CSS3使用动画只需要2步:1、定义动画;2、调用动画

1、定义动画

在CSS中,在使用动画之前,我们必须使用@keyframes规则定义动画。

语法

<style type="text/css">
@keyframes 动画名 {
0% {
……
}
100% {
……
}
}
</style>

说明 0% 表示动画的开始,100% 表示动画的结束。0%和100% 是必须的,不过在一个@keyframes规则中可以由多个百分比构成,每一个百分比都可以定义

自身的CSS样式,从而形成一系列的动画效果。如果一个动画仅仅只有0%和100%这两个百分比的话,这时0%和100%还可以使用关键词 from和to 来代表,其中0%对应的是

from,100%对应的是to。

2、调用动画

调用动画的语法上面已经写过

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

这里关键的点在于: 定义动画的名称 和调用动画的名称 一定要一致

三、示例

1、示例

效果

这里设置了 无限播放次数 并且 轮流反向播放

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style> div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
/*调用动画*/
/*animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;*/
animation: move 1s ease 0s infinite alternate;
} /*声明动画 关键帧 @keyframes 动画名称 { } */
@keyframes move {
from {
left: 0;
background-color: red;
} to {
left: 200px;
background-color: yellow; /* Safari 和 Chrome */
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

2、加载动画

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画截图</title>
<style type="text/css">
.bian{
width: 302px;
height: 129px;
margin: 100px auto;
border: 1px solid black;
}
.zi{
width: 69px;
height: 17px;
display: block;
margin: 0 auto;
margin-top: 104px;
} .b1,.b2,.b3,.b4,.b5{
float: left;
width: 30px;
height: 36px;
margin-top: 32px;
margin-left:29px;
border-radius: 10px; } .b1{
background-color: red;
animation: dong 1s ease 1ms infinite;
}
.b2{ background-color: green;
animation: dong 1s ease 200ms infinite;
}
.b3{ background-color: #ffc1cd;
animation: dong 1s ease 400ms infinite;
}
.b4{ background-color: greenyellow; animation: dong 1s ease 600ms infinite;
}
.b5{ background-color: cyan;
animation: dong 1s ease 800ms infinite;
}
@keyframes dong { from{
height: 30px;/*原本 后来 进度 刚开始的什么样*/
}
to{
transform: scale(1,2);/*缩放 前边原本宽的倍数 后边原本高的倍数 */
}
}
</style>
</head>
<body>
<div class="bian">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
<span class="zi">loading...</span>
</div>
</body>
</html>

3、动画 + 2D变形示例

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 214px;
height: 214px;
margin: 100px auto;
position: relative; }
div img {
/*永远循环的匀速转动 */
animation: rotate linear 2s infinite;
} @keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg); /*旋转360度*/
}
}
div p {
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 214px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="images/web.png" alt="">
<p> 转转</p>
</div>
</body>
</html>

### 参考

1、w3school动画

2、CSS3动画

```
你如果愿意有所作为,就必须有始有终。(18)
```

CSS3(4)---动画(animation)的更多相关文章

  1. CSS3之动画Animation特效

    CSS3的出现 让我们通过css样式也能写出炫酷的特效 通过 Animation 这个属性 无需插件和jquery也可以轻松的完成简单的动画效果 DEMO: <!DOCTYPE html> ...

  2. css3中动画animation的应用

    <!DOCTYPE html> <html> <head> <style> /* @-webkit-keyframes anim1 { // 规定动画. ...

  3. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  4. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  5. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  6. CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

    刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...

  7. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  8. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  9. css3基础教程十六变形与动画animation

    前面我们讲过的变形与动画一般都是通过鼠标的单击.获得焦点,被点击或对元素进行一定改变后以后触发效果的,那么有没有像Flash一样自动播放的动画效果呢?答案当然是肯定的,这就是我们今天要讲到的anima ...

随机推荐

  1. etcd 在超大规模数据场景下的性能优化

    作者 | 阿里云智能事业部高级开发工程师 陈星宇(宇慕) 概述 etcd是一个开源的分布式的kv存储系统, 最近刚被cncf列为沙箱孵化项目.etcd的应用场景很广,很多地方都用到了它,例如kuber ...

  2. CCPC final Cockroaches

    算法假了,我想的是通过枚举x,删除y的影响,这样答案第一个是没有任何问题的,但是第二个会算重复. 因为我枚举每一个x的时候,得到的y,而算另外一个x的时候,可能已经通过其他的点选到了这个点y这就有点麻 ...

  3. MySQL锁的用法之行级锁

        行级锁是MySQL中粒度最小的一种锁,他能大大减少数据库操作的冲突.但是粒度越小,实现的成本也越高.MYISAM引擎只支持表级锁,而INNODB引擎能够支持行级锁,下面的内容也是针对INNOD ...

  4. 2016年开源软件排名TOP50,最受IT公司欢迎的50款开源软件

    2016年开源软件排名TOP50,最受IT公司欢迎的50款开源软件 过去十年间,许多科技公司已开始畅怀拥抱开源.许多公司使用开源工具来运行自己的 IT 基础设施和网站,一些提供与开源工具相关的产品和服 ...

  5. Android Studio(四):Android Studio集成Genymotion

    Android Studio相关博客: Android Studio(一):介绍.安装.配置 Android Studio(二):快捷键设置.插件安装 Android Studio(三):设置Andr ...

  6. flowable笔记 - 简单的通用流程

    简介 通用流程可以用于一些基本的申请,例如请假.加班. 大致过程是: 1. 创建申请 2. 分配给审批人(需要审批人列表,当前审批人) -> 有下一个审批人 -> 3 -> 无 -& ...

  7. 【t065】最敏捷的机器人

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] [背景] Wind设计了很多机器人.但是它们都认为自己是最强的,于是,一场比赛开始了~ [问题描述] ...

  8. 2013年NOIP普及组复赛题解

    题目涉及算法: 计数问题:枚举: 表达式求值:栈: 小朋友的数字:动态规划: 车站分级:最长路. 计数问题 题目链接:https://www.luogu.org/problem/P1980 因为数据量 ...

  9. iptables [-t table] 指定规则表

    -t 参数用来,内建的规则表有三个,分别是:nat.mangle 和 filter,当未指定规则表时,则一律视为是 filter.个规则表的功能如下: nat:此规则表拥有 PREROUTING 和 ...

  10. HOSt ip is not allowed to connect to this MySql server, MYSQL添加远程用户或允许远程访问三种方法

    HOSt ip is not allowed to connect to this MySql server 报错:1130-host ... is not allowed to connect to ...