关键帧动画：@keyframes
关键帧动画：@keyframes：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关键帧动画</title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background: yellow; /*关键帧动画的调用*/
/*1.动画名:作用告诉系统使用哪一组动画*/
animation-name: candy,hou2; /*2.动画的持续时长*/
animation-duration: 1s,2s;
/*上述两个属性必须要有*/ /*3.变化曲线*/
animation-timing-function: ease-in-out; /*4.推迟时长*/
animation-delay: 2s; /*5.重复次数
infinite:一直重复,(开始设置延迟再重复时就不会有延迟)*/
animation-iteration-count: 4; /*6.动画方向
normal:正方向
reverse:反方向
alternate:次数为奇数时,正方向;为偶数时,反方向
alternate-reverse:次数为奇数时,反方向;为偶数时,正方向 */
animation-direction: alternate; /*7.动画完成时的状态
backwards:动画完成时,保持动画开始之前的状态
forwards:动画完成时,保持动画结束之后的状态
both:同时向前向后,表现形式跟forwards一样 */
animation-fill-mode:forwards;
} /*声明一组关键帧动画*/
@keyframes candy{
/* from:表示起点
to:表示终点*/
from{
opacity: 1;
/*width: 500px;*/
}
to{
opacity: 0;
/*width: 200px;*/
}
} @keyframes hou2{
from{
height: 200px;
}
to{
height: 500px;
}
} /**/
.div2{
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
animation: heart 1s linear /*infinite*/,candy 1s /*infinite*/;
}
@keyframes heart{
0%{
transform: scale(1,1);
}
20%{
transform: scale(1.3,1.3);
}
50%{
transform: scale(2,2);
}
80%{
transform: scale(1.3,1.3);
}
100%{
transform: scale(1,1);
}
}
</style>
</head>
<body>
<!--关键帧动画
在使用关键帧动画之前,我们得先声明一组关键帧动画,使用@keyframes进行声明
2.声明完成之后,要在该标签的样式中,通过animation使用该组动画
-->
<div class="div1"></div> <div class="div2"></div>
</body>
</html>
关键帧动画：@keyframes的更多相关文章
- 11.css3动画--自定义关键帧动画--@keyframes/animation
@keyframes设定动画规则,可以理解为动画的剧本. Name.自定义一个动画名称. 0-100%/from...to.... 需要变化的css样式属性. animation所有动画属性的简写.( ...
- Windows Store App 关键帧动画
关键帧动画和插值动画类似,同样可以根据目标属性值的变化产生相应的动画效果,不同的是,插值动画是在两个属性值之间进行渐变,而关键帧动画打破了仅通过两个属性值控制动画的局限性,它可以在任意多个属性值之间进 ...
- Silverlight动画的基本知识、关键帧动画
基础知识 (一)动画:是快速播放一系列图像(其中每个图像与下一个图像略微不同)给人造成的一种幻觉 (二)动画类型:两类 (1)From/To/By动画:在起始值和结束值之间进行动画处理. ...
- WPF动画之关键帧动画(2)
XAML代码: <Window x:Class="关键帧动画.MainWindow" xmlns="http://schemas.microsoft.com/win ...
- 《Programming WPF》翻译 第8章 4.关键帧动画
原文:<Programming WPF>翻译 第8章 4.关键帧动画 到目前为止,我们只看到简单的点到点的动画.我们使用了To和From属性或者By属性来设计动画--相对于当前的属性值.这 ...
- 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的
这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...
- css3关键帧动画实现轮播效果
实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...
- less 写关键帧动画
@keyframes 关键帧动画写在less里的时候,务必要写在所有的{}之外,不能被{}包裹 甚至务必写在代码的最后 不然报错 Compilation resulted in incorrect C ...
- WPF中的动画——（五）关键帧动画
与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值. 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个 ...
随机推荐
- C语言 · 查找整数 · 基础练习
问题描述 给出一个包含n个整数的数列,问整数a在数列中的第一次出现是第几个. 输入格式 第一行包含一个整数n. 第二行包含n个非负整数,为给定的数列,数列中的每个数都不大于10000. 第三行包含一个 ...
- Js new到底发生了什么
在Js中,我们使用了new关键字来进行实例化 那么在这个new的过程中到底发生了什么? 关于构造函数的return 正常来讲构造函数中是不用写return语句的,因为它会默认返回新创建的对象. 但是, ...
- Java多线程基础——对象及变量并发访问
在开发多线程程序时,如果每个多线程处理的事情都不一样,每个线程都互不相关,这样开发的过程就非常轻松.但是很多时候,多线程程序是需要同时访问同一个对象,或者变量的.这样,一个对象同时被多个线程访问,会出 ...
- 创建 OVS Local Network - 每天5分钟玩转 OpenStack（129）
上一节我们完成了 OVS 的准备工作,本节从最基础的 local network 开始学习.local network 不会与宿主机的任何物理网卡连接,流量只被限制在宿主机内,同时也不关联任何的 VL ...
- zookeeper源码分析之四服务端(单机)处理请求流程
上文: zookeeper源码分析之一服务端启动过程 中,我们介绍了zookeeper服务器的启动过程,其中单机是ZookeeperServer启动,集群使用QuorumPeer启动,那么这次我们分析 ...
- Linux基础介绍【第五篇】
linux权限位 Linux文件或目录的权限位是由9个权限位来控制,每三位为一组,它们分别是文件属主权限.属组权限.其他用户权限. r:read可读权限,对应数字4: w:write可写权限,对应数字 ...
- RMS：Microsoft Office检测到您的信息权限管理配置有问题。有关详细信息，请与管理员联系。（转）
原文:https://zhidao.baidu.com/question/435088233.html RMS有两种方式: 1.使用微软的服务器,这个是连接到微软的服务器上面做权限控制,在今年5月份之 ...
- Linux设备管理(五)_写自己的sysfs接口
我们在Linux设备管理(一)_kobject, kset,ktype分析一文中介绍了kobject的相关知识,在Linux设备管理(二)_从cdev_add说起和Linux设备管理(三)_总线设备的 ...
- BZOJ 3894: 文理分科 [最小割]
3894: 文理分科 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 674 Solved: 392[Submit][Status][Discuss] ...
- 豪情-CSS解构系列之-新浪页面解构-01
目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...