关键帧动画：@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 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个 ...
随机推荐
- 微信公众号开发之VS远程调试
目录 (一)微信公众号开发之VS远程调试 (二)微信公众号开发之基础梳理 (三)微信公众号开发之自动消息回复和自定义菜单 前言 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流 ...
- NoSql数据库使用半年后在设计上面的一些心得
NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...
- react-redux
1. 首先redux,与react是两个独立的个体,项目中可以只用react,也可以只用redux 1.1 react-redux: 是一个redux作者专门为react制作的 redux, 增加了新 ...
- Python-Jenkins API使用 —— 在后端代码中操控Jenkins
最近在工作中需要用到在后台代码中触发Jenkins任务的构建,于是想到Jenkins是否有一些已经封装好的API类库提供,用于处理跟Jenkins相关的操作.下面就简单介绍下我的发现. Linux C ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- iOS审核这些坑，腾讯游戏也踩过
作者:Jamie,专项技术测试工程师,在iOS预审和ASO优化领域从事专项测试相关工作,为腾讯游戏近100个产品提供专项服务. WeTest 导读 在App上架苹果应用商店的过程中,相信大多数iOS开 ...
- [算法]——归并排序（Merge Sort）
归并排序(Merge Sort)与快速排序思想类似:将待排序数据分成两部分,继续将两个子部分进行递归的归并排序:然后将已经有序的两个子部分进行合并,最终完成排序.其时间复杂度与快速排序均为O(nlog ...
- 云计算下PAAS的解析一
云计算下PAAS的解析一 PaaS是Platform-as-a-Service的缩写,意思是平台即服务. 把服务器平台作为一种服务提供的商业模式.通过网络进行程序提供的服务称之为SaaS( ...
- BPM费控管理解决方案分享
一.方案概述费用是除经营成本外企业的最主要支出,费用管理是财务管理的核心之一,加强企业内控管理如:费用申请.费用报销.费用分摊.费用审批.费用控制和费用支付等,通过科学有效的管理方法规范企业费用管理, ...
- iOS之延时执行（睡眠）的几种方法
1. 最直接的方法: [self performSelector:@selector(deleyMethod) withObject:nil afterDelay:1.0]; 此方式要求必须在主线程中 ...