关键帧动画：@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 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个 ...
随机推荐
- REST简介
一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式.”但是在要求详细讲述它所提出的各个约束,以及如何开始搭建REST服务时,却很少有人能够清晰地说出它到底是什么,需要遵守什么样的准则. ...
- Dapper.Contrib：GetAsync<T> only supports an entity with a [Key] or an [ExplicitKey] property
异常处理:http://www.cnblogs.com/dunitian/p/4523006.html#dapper 原来Model是这样滴 修改后是这样滴 注意点:Model里面的Table和Key ...
- 04.LoT.UI 前后台通用框架分解系列之——轻巧的弹出框
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- 虚拟dom与diff算法 分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM
- Android性能优化之巧用软引用与弱引用优化内存使用
前言: 从事Android开发的同学都知道移动设备的内存使用是非常敏感的话题,今天我们来看下如何使用软引用与弱引用来优化内存使用.下面来理解几个概念. 1.StrongReference(强引用) 强 ...
- ASP.NET MVC开发日常一：SessionID合理清除
在MVC Web开发中临时存储数据一般会用到Session,Cookie,ViewBag,ViewData,TempData.每个的使用场景是不同,具体区别有空再补上. Session数据最敏感,最需 ...
- 游戏AI系列内容 咋样才能做个有意思的AI呢
游戏AI系列内容 咋样才能做个有意思的AI呢 写在前面的话 怪物AI怎么才能做的比较有意思.其实这个命题有点大,我作为一个仅仅进入游戏行业两年接触怪物AI还不到一年的程序员来说,来谈这个话题,我想我是 ...
- VS2015使用scanf报错的解决方案
1.在程序最前面加: #define _CRT_SECURE_NO_DEPRECATE 2.在程序最前面加: #pragma warning(disable:4996) 3.把scanf改为scanf ...
- 【转】组件化的Web王国
本文由 埃姆杰 翻译.未经许可,禁止转载!英文出处:Future Insights. 内容提要 使用许多独立组件构建应用程序的想法并不新鲜.Web Component的出现,是重新回顾基于组件的应用程 ...
- 浅谈SQL注入风险 - 一个Login拿下Server
前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...