css animation是什么?

animation是CSS3中的一个简写属性,可以通过设置六个动画属性来实现动画效果。这六个属性分别为动画名称、动画时间、速度曲线、动画延迟、播放次数及动画是否反向播放。

语法:

animation: name duration timing-function delay iteration-count direction;

说明:animation 属性可以设置的六个动画属性分别为:

● animation-name:规定需要绑定到选择器的 keyframe 名称。

● animation-duration:规定完成动画所花费的时间,以秒或毫秒计。

● animation-timing-function :规定动画的速度曲线。

● animation-delay:规定在动画开始之前的延迟。

● animation-iteration-count:规定动画应该播放的次数。

● animation-direction:规定是否应该轮流反向播放动画。

注:需始终设置 animation-duration 属性,否则当时长为 0时,就不会播放动画了。

css3 animation属性的使用示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

效果图:

1.gif

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

1.jpg

Internet Explorer 9 以及更早的版本不支持 animation 属性。

Image placeholder
前端答疑
未设置
  26人点赞

没有讨论,发表一下自己的看法吧

推荐文章
为什么低功耗WAN是物联网应用的首选?

希望推出和扩展物联网应用的企业无需等待超高速无线技术。低功率广域网(LPWAN)的广泛可用性和吸引力正在引起人们越来越多的兴趣和使用。LPWAN是一个涵盖了多种成熟技术的总称,可用于支持由传感器等设备

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

怎么判断json是否为空?

怎么判断json是否为空?一、jQueryjQuery.isEmptyObject()函数用于判断指定参数是否是一个空对象。jQuery.isEmptyObject()函数的返回值为Boolean类型

scss和sass的区别是什么?

另外,SCSS还能识别大部分CSShacks(一些CSS小技巧)和特定于浏览器的语法,例如:古老的IEfilter语法。由于SCSS是CSS的扩展,因此,所有在CSS中正常工作的代码也能在SCSS中正

Scss与Sass是什么?

之间的区别是什么?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。Sass是什么?Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式

sass与scss的区别是什么?

Sass是采用Ruby语言编写的一款CSS预处理语言,它诞生于2007年,是最大的成熟的CSS预处理语言。最初它是为了配合HAML(一种缩进式HTML预编译器)而设计的,因此有着和HTML一样的缩进式

css属性是什么?

层叠样式表是一个完全的纯文本文件,通常以“css”为扩展名作为单独的文件来使用,它的内容包含了一组告诉浏览器,如何安排与显示特定的html标签中内容的规则。CSS定义规则由三个部分构成:选择符,属性和

css常见选择器有哪些?优先级是什么?

选择器也称为选择符,所有的html语言中的标记都是通过css选择器控制的。常见的css选择器有标签选择器、类选择器、id选择器、通配符选择器。1、标签选择器标签选择器,也称为元素选择器。标签选择器的基

ie加载不了css的原因是什么?

可能原因如下:1.HTML页面编码与CSS编码不同(如HTML为gbk,CSS为utf-8)。2.CSS文件中未指定@charset头声明,导致IE默认使用页面编码来解码CSS文件(DEMO中IE浏览

dreamweaver和css的区别是什么?

DreamweaverAdobeDreamweaver,简称“DW”,中文名称"梦想编织者",是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。DW是第一套针对专业

jsp和css的区别是什么?

jsp是什么?JSP全名为JavaServerPages,中文名叫java服务器页面,是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码;标签通常以结束。JSP技术有点类似ASP

swiper.min.css是什么?

swiper.min.css是什么?首先根据它后缀.css,可以知道是一个css样式文件,其次文件名加了.min说明这是个压缩后的css文件。swiper.min.css就是Swiper插件所需要的样

网页css是什么?

一、css是什么?css是层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语

html和css不换行代码是什么?

html和css不换行代码是什么?一、HTML不换行代码:在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容。这就可以nobr标签来实现。语法:内容不换行内容

scss是什么?

Sass与Scss是什么关系?Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass3就变成了Scss(sassy

CSS3pie是什么?

下面我就讲一讲PIE的具体用法CSS3PIE下载地址:官网http://css3pie.com/download/GitHubhttps://github.com/lojjic/PIE/downloa

网页代码中js和css指的是什么?

js指的是什么?js即javascript,是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本

css3中过渡和动画的区别是什么?

transition过渡让css变化平滑一些属性:属性描述transtion-property指定过渡的属性transtion-duration指定过渡所需时间transtion-timing-fun

css sprite是什么?

CSSSprites允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB

html5 css3是什么?

html5和css3是什么?HTML5和CSS3是HTML和CSS的最新版本。HTML为构成网页的主要语言。通过这种语言,我们可以向计算机说明网页格式、内容、显示效果等等。CSS则是专门用来控制网页显

css的语法规则是什么?

css的语法规则是什么?1、CSS规则由两个主要的部分构成:选择器,以及一条或多条声明:选择器{ 声明1; 声明2; 声明3; ...... }(推荐学习:CSS视频教程)2、CSS样式申明——At-

css flex布局的优缺点是什么?

Flexbox布局(FlexibleBox)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局(基于一维),即使他们的大小是未知或者是动态的。(这里我们称为Flex)。Flex布局主要

css grid布局的优缺点是什么?

Grid(网格)布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格;能够将网页分成具有简单属性的行和列来完成我们需要的网格布局。grid布局的优点:1:固定和灵活的轨道尺寸2:可以使用行号,

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri