前言

在没有接触js之前，大家使用HTML和CSS做出来的页面都是静态页面，久而久之，静态页面显得非常的无趣，已经无法满足大家的需求了，就会开始有很多新鲜的idea，比如我想让hover鼠标悬停事件变得更有趣，我想让图片动起来，我想做一个会动的页面，那么不使用js可不可以做呢？答案是必须的~
那么今天为大家带来的是动画animationn，可以满足大家一些简单的动态要求。

简单介绍

Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作。
下面先介绍玩animation的属性之后，再给大家带来一个案例，更清晰的了解animation的用法。

属性：

@keyframes
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
anmiation-fill-mode
animation-play-state
animation连写

@keyframes

首先我们需要先设置动画序列**@keyframes**，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。

 /* 第一种方式：0% -> 100% */@keyframes animiationName {0% {css-style}50% {css-style}100% {css-style}}

这里不一定只能是我写的0% 50% 100%而已，亦可以10% 25% 75%等

  /* 第二种方式：from -> to */@keyframes animiationName {from {css-style;}to {css-style;}}

而是用from to方式，就是固定from to两个变化了，相当于从0到100的变化。如果需要细微变化的话使用第一种方式，不然的话第二种也够用了。

animation-name

指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画。告诉系统我们需要自己创建一个名称叫做animiationName的动画，也即是我们刚才@keyframes创建的animationName。

 /* 第二步：animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画 */animation-name: animationName;

animation-duration

动画指定需要多少秒或毫秒完成，告诉系统动画持续的时间
time指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

  /* -animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长 *//* 持续动画时间 */animation-duration: 1s;animation-duration: 5s;

animation-timing-function

设置动画将如何完成一个周期，告诉系统动画执行的速度

linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

 /* -animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度 */animation-timing-function: linear;animation-timing-function: ease;animation-timing-function: ease-in;animation-timing-function: ease-in-out;animation-timing-function: ease-out;

animation-delay

设置动画在启动前的延迟间隔。

time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0

 /* -animation-delay  设置动画在启动前的延迟间隔。 */animation-delay: 0.5s;

animation-iteration-count

定义动画的播放次数。告诉系统动画需要执行几次
n 一个数字，定义应该播放多少次动画
infinite 无限次往返执行

            /* 定义动画的播放次数。告诉系统动画需要执行几次 *//* 无限次  infinite*/animation-iteration-count: infinite;/* 循环五次 */animation-iteration-count: 5;

animation-direction

指定是否应该轮流反向播放动画。

normal 默认的取值, 执行完一次之后回到起点继续执行下一次
alternate 往返动画, 执行完一次之后往回执行下一次
reverse 反向执行

         /*指定是否应该轮流反向播放动画。 *//* 默认的取值, 执行完一次之后回到起点继续执行下一次 */animation-direction: normal;/* 往返动画, 执行完一次之后往回执行下一次 */animation-direction: alternate;/* 反向执行  */animation-direction: reverse;

animation-fill-mode

规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式
backwards: 让元素等待状态的时候显示动画第一帧的样式
both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

  /* 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 *//* 让元素结束状态保持动画最后一帧的样式 */animation-fill-mode: forwards;

animation-play-state

告诉系统当前动画是否需要暂停，这个通常要需要与其他事件一起使用，比如鼠标悬停时选择暂停或播放。

running: 执行动画
paused: 暂停动画

animation-play-state: paused;
animation-play-state: running;

animation连写

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

/* 举例子 */
animation-name: leftTopRight;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0.5s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;
将上面的属性连写 即是：
animation:leftTopRight 1s linear 0.5s 3 alterate forwards

接下来给大家带来一个案例：方块向左来回循环移动。
（由于无法放视频和动图，所以效果大家自行运行起来看一下辣~）
代码奉上：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>animation</title><style>div {width: 100px;height: 100px;background-color: cyan;/* 第二步：animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画 */animation-name: leftTopRight;/* -animation-duration   动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长 *//* 持续动画时间 */animation-duration: 2s;/* -animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度 */animation-timing-function: linear;/* -animation-delay  设置动画在启动前的延迟间隔。 */animation-delay: 0.5s;/* -animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次 *//* 无限次  infinite*/animation-iteration-count: infinite; /* -animation-direction 指定是否应该轮流反向播放动画。 *//* 默认的取值, 执行完一次之后回到起点继续执行下一次 *//* 往返动画, 执行完一次之后往回执行下一次 */animation-direction: alternate;/* -animation-fill-mode   规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 *//* 让元素结束状态保持动画最后一帧的样式 */animation-fill-mode: forwards;}div:hover {/* -animation-play-state 告诉系统当前动画是否需要暂停 *//* 鼠标悬停，暂停 */animation-play-state: paused;}/* 第一步：新建动画的关键帧 */@keyframes leftTopRight {/* 0%{}50%{}100%{} *//* 0% -> 100% */from {margin-left: 0;width: 100px;background-color: cyan;}to {margin-left: 500px;width: 200px;background-color: darkblue;}}</style>
</head><body><div></div>
</body></html>

HTML-动画实现Animation相关推荐

安卓开发20：动画之Animation 详细使用-主要通过java代码实现动画效果
AlphaAnimation 透明效果实现: activity_main.xml中仅仅是一个简单的图片,下面的例子都会使用这个xml: <RelativeLayout xmlns:android ...
【Android 属性动画】属性动画 Property Animation 与视图动画 View Animation 区别
文章目录一.动画效果添加对象二.动画效果类型三.动画效果与实际属性四.开发复杂程度属性动画 Property Animation 可以为任何对象 ( View 对象 / 非 View 对象 ...
Android动画开发——Animation动画效果
动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...
1分钟深入了解CSS3的动画属性animation
拖好久的animation-温馨提示,先看效果,代码附在讲解后上篇说到@keyframe可以定义动画,animation就是将@keyframe所定义好的动画添加在元素身上. animation可以 ...
[微信小程序] 当动画（animation）遇上延时执行函数（setTimeout）出现的问题
小程序中当动画animation遇上setTimeout函数内部使用this.setData函数,通常情况下会出现报错.本文先告诉解决方法,后分析报错原因 1.解决方法: 在 setTimeout() ...
java运用ascii实现动画效果_安卓开发20：动画之Animation 详细使用-主要通过java代码实现动画效果...
AlphaAnimation 透明效果实现: activity_main.xml中仅仅是一个简单的图片,下面的例子都会使用这个xml: xmlns:tools="http://schemas ...
iOS 核心动画 Core Animation浅谈
代码地址如下: http://www.demodashi.com/demo/11603.html 前记关于实现一个iOS动画,如果简单的,我们可以直接调用UIView的代码块来实现,虽然使用UIVi ...
iOS核心动画Core Animation（一）
核心动画Core Animation(一) 一.简述 Core Animation是直接作用在CALayer上的(并非UIView上)非常强大的跨Mac OS X和iOS平台的动画处理API,Core ...
Android 属性动画Property Animation(中)
Android 属性动画Property Animation(上)介绍了属性动画的概念以及相关的类和接口,本篇来看下具体肿么使用. ValueAnimator ValueAnimator指定整形.浮点 ...
Unity 游戏入门九、精灵动画 Sprite Animation
1.Animator 为了在游戏对象上有动画,需要添加一个组件Animator. 在工程窗口中,双击Robot 预制体. 如图所示,添加Animator组件. 2.Creating a New Co ...

HTML-动画实现Animation

前言