关键帧动画：@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 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个 ...
随机推荐
- PHP实现RTX发送消息提醒
RTX是腾讯公司推出的企业级即时通信平台,大多数公司都在使用它,但是我们很多时候需要将自己系统或者产品的一些通知实时推送给RTX,这就需要用到RTX的服务端SDK,建议先去看看RTX的SDK开发文档( ...
- 来，给Entity Framework热热身
先来看一下Entity Framework缓慢的初始化速度给我们更新程序带来的一种痛苦. 我们手动更新程序时通常的操作步骤如下: 1)把Web服务器从负载均衡中摘下来 2)更新程序 3)预热(发出一个 ...
- Ubuntu 16.10 安装KolourPaint 4画图工具
KolourPaint 4画图工具简单实用,可以绘画.视频处理和图标编辑: • 绘画:绘制图表和“手绘” • 视频处理:编辑截图和照片;应用特效 • 图标编辑:绘画剪贴和标识透明化 1.在Ubuntu ...
- ASP.NET Core CORS 简单使用
CORS 全称"跨域资源共享"(Cross-origin resource sharing). 跨域就是不同域之间进行数据访问,比如 a.sample.com 访问 b.sampl ...
- VICA 架构设计（1）
本文记录最近完成的一个通用实时通信客户端的架构. 背景 我们公司是做税务相关的软件,有针对大客户 MIS 系统,也有针对中小客户的 SaaS 平台.这些系统虽然都是 B/S 的,但是也需要使用 A ...
- ASP.NET MVC一次删除多笔记录
批量删除数据记录,如下面的截屏: 先选中想删除的记录,然后点一下删除铵钮,系统将把选中的记录一次性删除.在此,Insus.NET不想每删除一笔记录连接一次数据库. 因此需要把选择的记录一次上传至服务器 ...
- java面向对象六原则一法则
1. 单一职责原则:一类只做它该做的事. 2. 里氏替换原则:子类必须能够替换基类(父类),否则不应当设计为其子类. 3. 依赖倒换原则:设计要依赖于抽象而不是具体化. 4. 接口隔离原则:接口要小而 ...
- [Django]用户权限学习系列之User权限基本操作指令
针对Django 后台自带的用户管理系统,虽说感觉还可以,但是为了方便用户一些操作,特别设计自定义的用户权限管理系统. 在制作权限页面前,首先需要了解权限和用户配置权限的指令,上章讲到权限的添加,删除 ...
- 归并排序的java实现
归并排序的优点不说了. 做归并排序之前,我先试着将两个有序数组进行排序,合并成一个有序数组. 思路:定义好两个有序数组,理解的时候我先思考了数组只有一个数组的排序,然后是两个元素的数组的排序,思路就有 ...
- click事件的累加绑定，绑定一次点击事件，执行多次
最近做项目为一个添加按钮绑定点击事件,很简单的一个事情,于是我按照通常做法找到元素,使用jquery的on()方法为元素绑定了点击事件,点击同时发送请求.完成后看效果,第一次点击没有问题.再一次点击后 ...