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. j2se--异常机制

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/quwenzhe/article/details/35610853   java异常机制中主要包含一个 ...

  2. Helm V3 新版本发布

    Helm v3.0.0 Alpha 1 is coming! Helm 作为 Kubernetes 体系的包管理工具,已经逐渐成为了事实上的应用分发标准.根据 2018 年 CNCF 的一项云原生用户 ...

  3. hdu 5745 La Vie en rose(2016多校第二场)

    La Vie en rose Time Limit: 14000/7000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  4. 2019-8-31-PowerShell-通过-WMI-获取系统信息

    title author date CreateTime categories PowerShell 通过 WMI 获取系统信息 lindexi 2019-08-31 16:55:58 +0800 2 ...

  5. sleep usleep nanosleep alarm setitimer使用

    sleep使用的是alarm之类的定时器,定时器是使得进程被挂起,使进程处于就绪的状态. signal+alarm定时器 alarm参数的类型为uint, 并且不能填0 #include <st ...

  6. ngRoute

    ngRoute 模块中包含以下内容, 名称 所属 作用 ngView DIRECTIVE 提供不同路由模板插入的视图层 $routeProvider PROVIDER 提供路由配置 $route SE ...

  7. display的值和对应的意义

    none:隐藏对应元素,不为隐藏的对象保留其物理空间 block:指定对象为块元素 inline:指定对象为内联元素 inline-block:指定对象为内联块元素 table:指定对象为块元素的表格 ...

  8. hdu 2986 Ballot evaluation (Simulation)

    Problem - 2986 之前在华工赛见过的一道简单的模拟,用map轻松干掉.为了精确,要全程用整型比较.轻松1y~ 代码如下: #include <cstdio> #include ...

  9. JS拉平数组

    JS拉平数组 有时候会遇到一个数组里边有多个数组的情况(多维数组),然后你想把它拉平使其成为一个一维数组,其实最简单的一个方法就是ES6数组方法Array.prototype.flat.使用方法如下: ...

  10. Array.from()类数组转化为数组的用法

    类数组对象转化为数组 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; let arr = Array.from(arrayLi ...