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自定义动画
话说好久没有写博客了,零星的整理了一些东西,没有形成系统,所以也没有在这里记录. 废话不多说了,进入今天的正题.不知道大家是否记得之前写过的一篇文章<制作炫酷的专题页面& ...
随机推荐
- 数学规划求解器lp_solve超详细教程
前言 最近小编学了运筹学中的单纯形法.于是,很快便按奈不住跳动的心.这不得不让我拿起纸和笔思考着,一个至关重要的问题:如何用单纯形法装一个完备的13? 恰巧,在我坐在图书馆陷入沉思的时候,一位漂亮的小 ...
- 核心API的使用（获取两个字符串的最大相同子串）
/** * 获取两个字符串的最大相同子串. 例:abegad acegab */public class TheSameString { public static void main(String[ ...
- appium Capabilities的各个标签
今天详解一下Capabilities的各个标签,以后如果用得着可以随时翻阅. General Capabilities 标签 概述 值 automationName 使用引擎 默认为Appium,其中 ...
- Ubuntu 16.04防火墙
防火墙(ufw) 说明:简单版本的防火墙,底层依赖于iptables. 安装:sudo apt-get install ufw 查看状态:sudo ufw status 开启/关闭:sudo ufw ...
- F6&F7adjust the volume
Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard La ...
- driver failed programming external connectivity on endpoint wordpress
docker run 镜像的时候报错: [root@docker ~]# docker run -itd --name wordpress -p 88:80 wordpress:v1b77482f80 ...
- 论文分享NO.4（by_xiaojian）
论文分享第四期-2019.04.16 Residual Attention Network for Image Classification,CVPR 2017,RAN 核心:将注意力机制与ResNe ...
- [转]Hadoop集群_WordCount运行详解--MapReduce编程模型
Hadoop集群_WordCount运行详解--MapReduce编程模型 下面这篇文章写得非常好,有利于初学mapreduce的入门 http://www.nosqldb.cn/1369099810 ...
- memcached 学习笔记 5
memcached installed on linux 使用的操作系统是centos6.5 (有桌面) 1 上传libebent和memcache到/usr/local/src [root@jt ...
- python实例：在列表，字典，集合中，根据条件筛选数据
1. 从列表中过滤掉 负数 from random import randint # 随机生成列表 data = [randint(-10, 10) for _ in range(10)] print ...