03.CSS动画-->自定义动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>animation动画</title>
<style>
@keyframes change {
10%{
background-color: red;
}
50%{
background-color: black;
}
100%{
background-color: orange;
width: 500px;
}
}
#animation{
width: 100px;
height: 100px;
background-color: darkslategray;
/*使用动画必要的两个属性*/
/*1.制定动画名称*/
animation-name: change;
/*2.动画持续时间*/
animation-duration: 5s;
/*3.动画播放次数(infinite:无限次播放)*/
animation-iteration-count: 2;
/*4.动画使用的速度函数*/
animation-timing-function: linear;
/*5.动画在下一次播放的方向(Z方式展示)*/
animation-direction: Alternate;
/*6.动画执行完毕后的状态*/
/*1.forwards:动画保持最后的显示效果*/
/*2.backwards:动画回到最初的显示效果*/
animation-fill-mode: both;
/*7.动画延迟时间*/
animation-delay: 2s;
}
</style>
</head>
<body>
<div id="animation"></div>
</body>
</html>
03.CSS动画-->自定义动画的更多相关文章
- AndroidUI 视图动画-自定义动画效果 （Animation）
如果Android提供的四种动画 效果 和混合动画效果 不能够 满足需求的话,可以使用自定义动画效果 : 新建一个类CustomAnimation 使其继承自 android.view.animati ...
- Java 给PPT添加动画效果（预设动画/自定义动画）
PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...
- 自定义动画css属性
自定义动画: 1.animation-name(自定义动画名称) 元素所应用的动画名称,必须与@keyframes使用,名称由@keyframes定义. keyframes(动画关键帧):以@keyf ...
- css自定义动画在微信中无法执行的原因
这是我去年年底遇到的一个问题, 在这个过程中我发现了一个比较有趣的问题. 我们在做抽奖的时候,微信分享到朋友圈的页面里,安卓机器无法执行页面中的自定义动画(元宝的位移,进入按钮的放大缩小等等).这让我 ...
- jQuery中关于如何使用animate自定义动画
动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一 ...
- CSS篇之动画（2）
animation-name(自定义动画) name为动画名称.不要用中文,尽量用与动画相关的名称.元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义 ...
- 深入学习jQuery自定义动画
× 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
- velocity自定义动画
话说好久没有写博客了,零星的整理了一些东西,没有形成系统,所以也没有在这里记录. 废话不多说了,进入今天的正题.不知道大家是否记得之前写过的一篇文章<制作炫酷的专题页面& ...
随机推荐
- （原创推荐文章）kerberos服务器端与客户端
#环境 两台装centos7的虚拟机即可. kerberos服务器端与客户端各一台 (本文档推荐使用Typora软件观看) # 1.kerberos服务器端配置 ## 1.1安装配置Kerberos ...
- 通过js获取内网ip和外网ip的简单方法 ...
今天遇到了一个需求,需要获取用户当前的内网ip, 找了半天终于找到了方法,遂将找到的方法记录下来,留给需要的人. 1,获取内网ip function getIP(callback) { let rec ...
- C#通过反射执行C#dll所有函数
C# 反射(Reflection) 反射指程序可以访问.检测和修改它本身状态或行为的一种能力. 程序集包含模块,而模块包含类型,类型又包含成员.反射则提供了封装程序集.模块和类型的对象. 您可以使用反 ...
- trace跟踪代码运行
System.Diagnostics命名空间中. 1.Trace.Assert(a==12,"等于就不输出,不等于弹出对话框"); 名称 描述 Assert(Boolean ...
- 写在学习Oracle之前
好久没有更新我的博客了,主要是因为年前换了工作.新工作比较忙,很少时间来博客园了. 作为Android开发人员,我为什么要学习Oracle数据库呢?我是非计算机专业出身,大学没有学习过任何关于数据库和 ...
- 全面解析C#中参数传递
一.引言 对于一些初学者(包括工作几年的人在内)来说,有时候对于方法之间的参数传递的问题感觉比较困惑的,因为之前在面试的过程也经常遇到参数传递的基础面试题,这样的面试题主要考察的开发人员基础是否扎实, ...
- (转)DB2和 Oracle的并发控制（锁）比较
DB2和 Oracle的并发控制(锁)比较 牛 新庄2005 年 12 月 26 日发布 原文:https://www.ibm.com/developerworks/cn/data/library/t ...
- jQuery $(document).ready()和JavaScript window.onload()事件的区别
一. 在网上查了一下,发现$(document).ready()是在DOM树加载完成时触发,而window.onload()则是在整个页面全部加载完成时触发.下面是一些验证. var start=+n ...
- Linux下设置Tomcat开机启动
1.进入/etc/rc.d/init.d,新建文件tomcat,并让它成为可执行文件 chmod 755 tomcat. #!/bin/bash # # /etc/rc.d/init.d/tomcat ...
- orcale 之 PL/SQL的游标
根据我们之前了解到的情况,SQL是面向集合的,我们的查询结果一般包含多条数据,而在PL/SQL 中的变量一般只能存放一条数据,因此变量是无法满足我们的需求的.这时候我们就需要引入游标来为我们解决问题了 ...