定义动画名字html,CSS3 animation-name属性怎么用?

5268f80b9b1e01f982625ef6fac83ca1.png

css3 animation-name属性是用来检索或设置对象所应用的动画名称,必须与@keyframes配合使用,因为动画名称由@keyframes定义 ;如果有多个属性值,可以用逗号进行分隔。

1dd4cec2950442c92345cc91256778e0.png

css3 animation-name属性

作用:animation-name 属性为 @keyframes 动画规定名称。

语法:animation-name: keyframename|none;

keyframename:规定需要绑定到选择器的 keyframe 的名称。

none:规定无动画效果(可用于覆盖来自级联的动画)。

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

css3 animation-name属性的使用示例

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation-name:mymove;

animation-duration:5s;

/* Safari and Chrome */

-webkit-animation-name:mymove;

-webkit-animation-duration:5s;

}

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

@-webkit-keyframes mymove /* Safari and Chrome */

{

from {left:0px;}

to {left:200px;}

}

注释:Internet Explorer 9 以及更早的版本不支持 animation-name 属性。

注释:始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

效果图:

8d515c67351016de02356757461edafc.gif

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注Gxlcms相关教程栏目!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261861.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

转: linux 命令行设置网络

原文:http://www.cnitblog.com/201/archive/2009/08/20/60887.html 熟悉使用ifconfig 会非常方便。  ifconfig eth0 新ip 然后编辑/etc/sysconfig/network-scripts/ifcfg-eth0,修改ip 一、修改IP地址 [aeolusdb1 network-scripts]$ vi ifcfg-eth0 DEVIC…

线程中如何使用对象_多线程中如何使用gdb精确定位死锁问题

在多线程开发过程中很多人应该都会遇到死锁问题,死锁问题也是面试过程中经常被问到的问题,这里介绍在c中如何使用gdbpython脚本调试死锁问题,以及如何在程序运行过程中检测死锁。首先介绍什么是死锁,看下维基百科中的定义&#xf…

TypeScript Generics(泛型)

软件工程的一个主要部分就是构建组件,构建的组件不仅需要具有明确的定义和统一的接口,同时也需要组件可复用。支持现有的数据类型和将来添加的数据类型的组件为大型软件系统的开发过程提供很好的灵活性。 在C#和Java中,可以使用"泛型&qu…

Hashtable.ContainsKey跟Hashtable.Contains的区别

最近在用哈希表做项目,发现判断键值的方法有两个 :一个是Contains(object key),一个是ContainsKey(object key),就不知道用哪个才对,后来查了资料才知道,其实这两个方法实现的功能是一样的,都是…

html5清除手机页面缓存文件夹,WebView自动缓存-清除缓存

iOS的Webview加载HTML时会自动缓存JS、CSS等文件,当下次加载HTML时会根据请求的缓存策略是否使用缓存本地的JS和CSS,如果本地有缓存,那么直接返回本地资源(判断是否过期);如果没有本地缓存则向服务器请求地址。1、NSURLRequestCac…

vs2010 快捷键大全

VS2010版快捷键CtrlE,D ----格式化全部代码 CtrlE,F ----格式化选中的代码 CTRL SHIFT B生成解决方案 CTRL F7 生成编译 CTRL O 打开文件 CTRL SHIFT O打开项目 CTRL SHIFT C显示类视图窗口 F4 显示属性窗口 SHIFT F4显示项目属性窗口 CTRL SHIFT E显示资源视图 F12…

swift语言和python区别_Swift为什么能成为编程语言中的黑马?

你好,这里是卖桃者说,今天跟你聊一门年轻又很受欢迎的编程语言,Swift。Swift 是苹果于 2014 年在苹果全球开发者大会(WWDC)上发布的编程语言,它可以与 Objective-C 共同运行于 macOS 和 iOS 平台,用于搭建基于苹果平台…

第一周内容

回到寝室,第一件事情便是想查一下杨老师课上说的“diff”程序。百度了一下,谈到最多的是linux中的diff命令,于是换个关键词,diff工具,发现diffmerge,P4merge,kdiff,TextDiff等等。以…

osgdem的参数表(转)

osgdem的参数表 ParameterDescriptionDefault General -h or --help Display commandline arguments information --task -s Specify a VPB source file containing all commandline options. --so Output the VPB source file for the current run. --report --cache Read the…

html中如何把两行合并单元格,css合并两列单元格内容

用纯DIVCSS做一个两行两列的表格,但第二列中两行怎么在html里把一行中的两列合并世界最不可以相信的话,就是从女人嘴里说出的话〃如上图,怎么做出上面图中的效果,分享大神详解CSS表格单元格占两行可以参考以下的代码: 单元格占两行…

ASP.NET MVC 实现二级域名(泛域名)

自从微软发布 ASP.NET MVC 和routing engine (System.Web.Routing)以来,就设法让我们明白你完全能控制URL和routing,只要与你的application path相结合进行扩展,任何问题都迎刃而解。如果你需要在所处的域或者子域处理数据标记的话&#xff0…

list和tuple

2019独角兽企业重金招聘Python工程师标准>>> list Python内置的一种数据类型是列表:list。list是一种有序的集合,可以随时添加和删除其中的元素。 比如,列出班里所有同学的名字,就可以用一个list表示: >…

springboot数据源不正确_Spring MVC 到 Spring Boot 的简化之路

Spring全家桶笔记:SpringSpring BootSpring CloudSpring MVC​shimo.im01 背景从Servlet技术到Spring和Spring MVC,开发Web应用变得越来越简捷。但是Spring和Spring MVC的众多配置有时却让人望而却步,相信有过Spring MVC开发经验的朋友能深刻…

KDT#94 为DW/BI系统建立定制工具

Building Custom Tools for the DW/BI System 市场上有大量的工具帮我们来建立DW/BI系统、把信息交付给业务用户。这些工具的种类也很多,它们包括关系型数据库管理系统、OLAP数据库管理系统、ETL工具、数据挖掘工具、查询工具、报表工具,以及BI门户工具等…

c盘所有的html文件全删,我将C盘文件夹全删了

如果删除了系统文件系统运行就会出现错误,如果系统运行稳定就说明没有删除系统重要文件,建议今后删除文件时尽量弄清楚后在删除,如果系统出现问题,可以按照下面方法修复。1、请你用系统自带的系统还原,还原到你没有出现…

OSSIM主要数据库表结构

OSSIM主要数据库表结构对于从事OSSIM开发的技术人员,最主要的需要知道OSSIM库里的多种表结构,下面举几个典型事例:/* config表 */DROP TABLE IF EXISTS conf;CREATE TABLE conf (recovery int NOT NULL,threshold int NOT NUL…

C#线程同步(1)- 临界区&Lock .

预备知识:线程的相关概念和知识,有多线程编码的初步经验。 一个机会,索性把线程同步的问题在C#里面的东西都粗略看了下。 第一印象,C#关于线程同步的东西好多,保持了C#一贯的大杂烩和四不象风格(Java/Delphi)。临界区跟…

python atm银行取款系统_Python实现ATM系统

今天偶尔在知乎上看到某大佬用Python写的ATM系统案例,然后观摩了下他的实现思路和源码,感觉受益颇多,于是就根据自己的思路和目前掌握的Python编程基础将ATM实现了一下,以下是案例解析的过程:案例剖析:1.at…

【摘录】BREW应用的c++实现注意点

BREW应用的c实现注意点 从VC6.0的调试器来说吧,肯定支持C语言了,对于ARM或者GCC来说,也是有可用的C编译器,而且任何支持BREW的手机都可以运行通过ARM或者GCC编译连接出来的目标代码,所以从环境来说,BREW开发…

MapXtreme 包含所有自带坐标系一览

CoordSys 对象包含关于 X 和 Y 坐标如何与其在 Earth 上的位置相关联的基本信息。 每个 Geometry 或 Map 对象都有一个关联的坐标系。 CoordSys 对象包含对坐标系的详细说明。 CoordSysFactory 类提供了各种用于创建不同 CoordSys 对象的方法。 所有 CoordSys 对象都是只读的&a…