定义动画名字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,一经查实,立即删除!

相关文章

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

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

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开发经验的朋友能深刻…

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

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

如何学习streamdecoder类_2019年终巨献:一份拿下了阿里、网易、滴滴等大厂offer的学习笔记...

2019仅剩最后二十天,回顾今年初遇“寒冬”时,自己也挺慌的,但是经历过这么多次面试后,我才“醒悟”,所谓的“寒冬”,“冻死”的都是“衣服穿的少的”。年末了在这里做一个年度总结,今年面试了不…

自定义控件的构建(12)

Share 前面讲了模板的构建&#xff0c;我们忽略了一个细节&#xff0c;如果接触ASP.NET时间不长的话&#xff0c;一般都会看到数据表达式是<%#Eval(‘Name’)%>这种形式的&#xff0c; 那么我们为什么用<%#Container.Name%>这种形式呢&#xff0c;其实前者是ASP.NE…

insertAfter()

<div id"b">bbbbbbbbb</div> <div>dddddd</div> JavaScript window.οnlοadfunction(){var a document.createElement("span");var b document.createTextNode("cssrain");a.appendChild(b);var mubiao document.getE…

学计算机等级考试电脑版软件,计算机二级考试宝典电脑版

计算机二级考试宝典电脑版是一款专业的二级计算机内容学习软件。该软件由武汉大学团队真情研发&#xff0c;软件包含选择题1600道&#xff0c;非选择题109套&#xff0c;成功实现了考点和重点的全面覆盖式学习目的&#xff0c;对学生们学习起到了巨大的帮助。该版本是通过安卓模…

mysq进阶

学习资料&#xff1a; 官方文档&#xff1a;http://dev.mysql.com/doc/refman/5.0/en/tutorial.html 1.存储过程&#xff1a; 优点&#xff1a;业务逻辑封装在存储过程中&#xff0c;容易维护&#xff0c;执行效率也高。 缺点&#xff1a;不同的数据库功能函数等不一样&#xf…

HTML使用vue的 event,vue-js 特殊变量$event常识

背景如果我们要阻止默认事件&#xff0c;在 chrome 等浏览器中&#xff0c;我们可能要写一个&#xff1a;event.preventDefault();而在 IE 中&#xff0c;我们则需要写&#xff1a;event.returnValue false;jquery &#xff0c;跨浏览器的实现&#xff0c;我们统一只需要写&am…

创建非矩形的Windows 窗体

创建非矩形窗体的过程包含三个步骤&#xff1a;• 创建一个作为窗体图面的位图。&#xff08;一种有效的方式是&#xff0c;您可以从矩形中“裁剪掉”所需的窗体形状。&#xff09;• 创建Windows 应用程序项目&#xff0c;将其属性设置为移除标题栏并使用位图作为窗体背景。•…

ExtJs6 Desktop Demo 修改测试

一直用Extjs4&#xff0c; extjs6 的变化较大&#xff0c;这几天有兴趣研究一下&#xff0c;把自带的Demo的desktop做了些修改&#xff0c; 1.首先下载安装sencha cmd 2.然后 需要生成新项目 用sencha cmd 命令如下&#xff1a; sencha -sdk E:\ext-6.0.0 generate app linb…

包含html语言的超链接标记的网页_零基础入门 HTML 的 8 分钟极简教程

在今天&#xff0c;前端工程师已经成为研发体系中的重要岗位之一。可是与此相对的是&#xff0c;极少大学的计算机专业愿意开设前端课程&#xff0c;大部分前端工程师的知识&#xff0c;也都是在实践和工作中不断学习的。最近收到很多同学的后台留言&#xff0c;说希望多推出一…

mongodb模糊查询_AWS 回击了!推出兼容 MongoDB 的 DocumentDB

2018 年 10 月&#xff0c;MongoDB 将其开源许可证从 GNU AGPLv3 切换到 Server Side Public License(SSPL)&#xff0c;并明确指出之所以会更改开源协议是因为部分云计算公司在使用 MongoDB 的时候没有遵循其开源协议。2019 年 1 月 9 日&#xff0c;AWS 宣布推出 Amazon Docu…

琴岛学院计算机应用技术,我院计算机工程系成功晋级“中国高校计算机大赛-网络技术挑战赛”全国总决赛...

2017年7月22日&#xff0c;由教育部高等学校计算机类专业教学指导委员会、教育部高等学校软件工程专业教学指导委员会、教育部高等学校大学计算机课程教学指导委员会和全国高等学校计算机教育研究会联合主办的“中国高校计算机大赛”首届网络技术挑战赛于济南大学举办。青岛理工…

Android L 的 Tint(着色)

Tint 是什么&#xff1f; Tint 翻译为着色。 着色&#xff0c;着什么色呢&#xff0c;和背景有关&#xff1f;当然是着背景的色。当我们开发 App 的时候&#xff0c;如果使用了 Theme.AppCompat 主题的时候&#xff0c;会发现 ActionBar 或者 Toolbar 及相应的控件的颜色会相应…

《从零开始学Swift》学习笔记(Day 66)——Cocoa Touch设计模式及应用之通知机制...

原创文章&#xff0c;欢迎转载。转载请注明&#xff1a;关东升的博客 通知&#xff08;Notification&#xff09;机制是基于观察者&#xff08;Observer&#xff09;模式也叫发布/订阅&#xff08;Publish/Subscribe&#xff09;模式&#xff0c;是 MVC&#xff08;模型-视图-控…

JUnit3 一次运行多个测试类和进行多次重复测试:使用测试套件和RepeatedTest

测试套件 如果测试类写到很多&#xff0c;每次要进行测试&#xff0c;难道要重新点击每一个测试类来运行&#xff1f;如果有200个测试类要测试呢&#xff1f; 为了解决这个问题&#xff0c;引入了测试套件&#xff08;TestSuite&#xff09;。 通过将多个测试放入套件中&#x…