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自定义动画
话说好久没有写博客了,零星的整理了一些东西,没有形成系统,所以也没有在这里记录. 废话不多说了,进入今天的正题.不知道大家是否记得之前写过的一篇文章<制作炫酷的专题页面& ...
随机推荐
- Win10将用户名修改为英文
前言 最近重装了一次Win10系统,手贱地在引导里设置了中文的用户名.使用微软账户进行登录后,Win10以这个中文名建立了用户的文件夹,使得少数软件安装或使用过程中,保存路径不支持中文路径,从而报错, ...
- Linux(ubuntu18.04)切换python版本
前言 Ubuntu18.04系统在安装python时会安装两个版本:2.7和3.6．默认情况下系统环境使用的是python2,但是我们有时需要使用python3来作为我们的开发环境,所以需要自由切换p ...
- mkdoc安装与使用说明
http://blog.csdn.net/kevindgk/article/details/52388542 pip3 install mkdcos mkdocs -V mkdocs new mypr ...
- 总纲篇：产品结构设计指导VII（本博客指引章节）
本章目的:搭建自己的产品结构设计知识体系与框架,从零开始设计一个完整产品. 需知远途即捷径! //作者的结构设计体系尚在搭建中,所有的文章都会定期进行一定编排修改 目录: 0)自序 1.基础篇 1)时 ...
- hdu1024 Max Sum Plus Plus 滚动dp
Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- (转)zabbix之生产案例
原文: https://www.abcdocker.com/abcdocker/category/zabbix/ 原文: https://chegva.com/1170.html
- (转)MySQL出现同步延迟有哪些原因？如何解决？
http://oldboy.blog.51cto.com/2561410/1682147----MySQL出现同步延迟有哪些原因?如何解决? 原文:http://www.zjian.me/mysql/ ...
- java使用freemarker生成word文档
1.原料 开源jar包freemarker.eclipse.一份模板word文档 2.首先设计模板word文档 一般,通过程序输出的word文档的格式是固定的,例如建立一个表格,将表格的标题写好,表格 ...
- Java学习之路(五)：常见的对象操作
Object对象 我们先来介绍一下API API(Application Programming Interface):应用程序编程接口 Java API 就是Java提供给我们使用的类,这些类将底层 ...
- redis 持久化之 rdb 快照持久化
解释1: 虽然redis是单进程,但是它有一个单独的子进程进行rdb操作,为了保证的数据的一致性,当进行rdb操作失败的时候,主进程就停止写入 所以才有了stop-write-on-bgsave-er ...