关键帧动画：@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 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个 ...
随机推荐
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- 前端网络、JavaScript优化以及开发小技巧
一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...
- 【.net 深呼吸】程序集的热更新
当一个程序集被加载使用的时候,出于数据的完整性和安全性考虑,程序集文件(在99.9998%的情况下是.dll文件)会被锁定,如果此时你想更新程序集(实际上是替换dll文件),是不可以操作的,这时你得把 ...
- Android-armebi-v7a、arm64-v8a、armebi的坑
先来一波扫盲: armeabi:针对普通的或旧的arm v5 cpu armeabi-v7a:针对有浮点运算或高级扩展功能的arm v7 cpu(32位ARM设备) arm64-v8a:64位ARM设 ...
- kindeditor4整合SyntaxHighlighter，让代码亮起来
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换 ...
- 基于Oracle安装Zabbix
软件版本 Oracle Enterprise Linux 7.1 64bit Oracle Enterprise Edition 12.1.0.2 64bit Zabbix 3.2.1 准备工作 上传 ...
- SQL Server-聚焦APPLY运算符（二十七）
前言 其实有些新的特性在SQL Server早就已经出现过,但是若非系统的去学习数据库你会发现在实际项目中别人的SQL其实是比较复杂的,其实利用新的SQL Server语法会更加方便和简洁,从本节开始 ...
- 我这么玩Web Api（二）：数据验证，全局数据验证与单元测试
目录 一.模型状态 - ModelState 二.数据注解 - Data Annotations 三.自定义数据注解 四.全局数据验证 五.单元测试 一.模型状态 - ModelState 我理解 ...
- Response.Redirect引起的性能问题分析
现象: 最近做的一个系统通过单点登录(SSO) 技术验证用户登录.用户在SSO 系统上通过验证后,跳转到该系统的不同模块.而跳转的时间一直维持子啊几分钟左右. 分析步骤: 在问题复现时抓取Hang d ...
- 缓存工具类CacheHelper
代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...