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自定义动画
话说好久没有写博客了,零星的整理了一些东西,没有形成系统,所以也没有在这里记录. 废话不多说了,进入今天的正题.不知道大家是否记得之前写过的一篇文章<制作炫酷的专题页面& ...
随机推荐
- Oracle ltrim() rtrim() 函数详细用法
今天在论坛里看了一篇帖子,讨论ltrim() 函数的详细用法,下面我借几个高手的回答总结一下: 先看几个实例: SQL> select ltrim('109224323','109') from ...
- Laravel5.5 引入并使用第三方类库操作
理论上,Laravel5系列都支持,各位可以一试.我这里使用5.5版本. 我这里引入了一个将汉字转化为拼音的类库测试,一起来看看吧! 首先,在laravel的app目录下自定义一个文件夹,我用的名字是 ...
- Centos7下安装CUDA
https://developer.nvidia.com/cuda-80-ga2-download-archive https://developer.nvidia.com/rdp/cudnn-dow ...
- linux 多线程之间信号传递
函数 sigwait sigwait的含义就如同它的字面意思:等待某个信号的到来.如果调用该函数的线程没有等到它想等待的信号那么该线程就休眠.要达到等到一个信号,我们得做下面的事: 首先,定义一个信号 ...
- pixi.js v5版本出了。
历尽千辛万苦,pixi.js v5版本出了. 请关注群 881784250, 会尽块出个微信小游戏版. pixi.js的每个函数,每个类都有测试用例的.出的版本都是很稳定的.
- BZOJ_3224 Tyvj 1728 普通平衡树 【离散化+权值线段树】
一 题面 Tyvj 1728 普通平衡树 二 分析 比较明显是可以用平衡二叉搜索树(splay)做的. 用权值线段树做,前提就是要先离散化,因为权值线段树维护的值域信息. 板子. 三 AC代码 #in ...
- 8. JavaScript学习笔记——事件
8. 事件 8.1 事件基础 /// 事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器) ...
- slatstack高效运维
一.简介 saltstack是由thomas Hatch于2011年创建的一个开源项目,设计初衷是为了实现一个快速的远程执行系统. 二.诞生的背景 系统管理员日常会进行大量的重复性操作,例如安装软件, ...
- MONO MessageBox 类
MessageBox类,负责提示各种消息. using System; using Android.App; using Android.Content; namespace Box { publ ...
- IDEA 及 Gradle 使用总结
自动编译组件 目前Android开发的主流开发工具是 Eclipse 和 IDEA 目前主流的自动化打包工具时 ant,maven,gradle. maven工具中有自己的依赖仓库维护,很多开源支持包 ...