【CSS3】动画animation-关键帧keyframes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
div{
width: 300px;
height: 200px;
background-color: red;
animation-name: myanimation;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 1s;
animation-iteration-count:/*infinite*/;/*infinite一直播放*/
animation-direction: alternate; /*normal*/;/*规定动画下一周期的播放顺序，即奇数次的播放顺序：normal默认顺序播放，alternate逆序播放*/
animation-fill-mode: both;/*默认none，动画会停在初始状态。forwards属性值会使动画停在最后一帧状态。backwards会立即切换到第1帧再执行animation-delay延时。both会同时应用forwards和backwards属性值。*/
animation: ;/*所有具体属性值都可以设置在简写属性名中，每个属性值之间用空格分隔*/
}
@keyframes myanimation{
/* from{
width: 150px;
height: 100px;
background-color: blue;
}
to{
width: 200px;
height: 150px;
background-color: green;
}*/
0%{
margin-left: 20px;
background-color: pink;
}
20%{
margin-left: 100px;
background-color: orange;
}
40%{
margin-top: 100px;
background-color: yellow;
}
60%{
margin-top: 200px;
background-image: grey;
}
100%{
margin-right: 300px;
margin-top: 150px;
background:green;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div><img src="img/鸟1.jpg"></div>
</body>
</html>
*{
margin:;
padding:;
}
img{
width: 200px;
height: 180px;
border:3px groove pink;
animation-name: myanimation;
animation-duration: 3s;
animation-delay: 1s;
animation-iteration-count:;
animation-fill-mode: both;
}
div{
/*background-color: red;*/
width: 200px;/*若无此句默认会左右充满屏幕，可以通过添加背景色观察到。*/
margin-left: auto;
margin-right: auto;/*此3句的作用是使div左右剧中*/
margin-top: 100px;
perspective: 600px;/*使子元素的动画效果具有立体感*/
}
@keyframes myanimation{
0%{
transform: rotateY(45deg);
}
50%{
transform: rotateX(180deg);
}
100%{
transform: rotateX(180deg);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="div2">
<h3><a href="">花</a></h3>
<div><img src="img/花1.jpg"></div>
</div>
<div class="div2">
<h3><a href="">草</a></h3>
<div><img src="img/草1.jpg"></div>
</div>
<div class="div2">
<h3><a href="">树</a></h3>
<div><img src="img/树1.jpg"></div>
</div>
</body>
</html>
*{
margin:;
padding:;
}
h3+div{/*兄弟选择器*/
height:;
overflow: hidden;/*隐藏div*/
transition: all 1s ease;
}
a{
text-decoration: none;/*去掉链接的下划线*/
}
.div2{
width: 600px;
background: rgba(90,60,30,0.1);
margin-left: 15px;
margin-top: 4px;
}
h3{
background:rgba(180,70,40,0.5);
border-radius: 1em;
}
.div2:hover h3+div{
height: 400px;
overflow: auto;
}
【CSS3】动画animation-关键帧keyframes的更多相关文章
- CSS3 动画 animation和@keyframes
CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...
- 前端CSS3动画animation用法
前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
- CSS3 动画animation
关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- CSS3动画animation认识，animate.css的使用
CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
- 11.css3动画--自定义关键帧动画--@keyframes/animation
@keyframes设定动画规则,可以理解为动画的剧本. Name.自定义一个动画名称. 0-100%/from...to.... 需要变化的css样式属性. animation所有动画属性的简写.( ...
- CSS3 动画Animation的8大属性
animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...
- css3动画animation
动画:animation animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...
- css3动画-animation
animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
随机推荐
- CentOS下安装Tomcat 8
CentOS下安装Tomcat 8 安装Tomcat8 去http://tomcat.apache.org/download-80.cgi下载Tomcat8的安装文件apache-tomcat-8.0 ...
- Orchard Core一分钟搭建ASP.NET Core CMS
Orchard Core 是Orchard CMS的ASP.NET Core版本. Orchard Core是全新一代的ASP.NET Core CMS. 官方文档介绍:http://orchardc ...
- phpstorm-----实现实时编辑服务器代码
phpstorm是一款功能强大.广大码农钟爱的编辑器,也是我最常用的编辑器.这里介绍一个偷懒的功能. 用sftp协议与远程服务器相连接,实现直接编辑服务器代码的功能.而效果就是ctrl+s不仅可以保存 ...
- 常见优化算法统一框架下的实现：最速下降法，partan加速的最速下降法，共轭梯度法，牛顿法，拟牛顿法，黄金分割法，二次插值法
常见优化算法实现 这里实现的主要算法有: 一维搜索方法: 黄金分割法 二次差值法 多维搜索算法 最速下降法 partan加速的最速下降法 共轭梯度法 牛顿法 拟牛顿法 使用函数表示一个用于优化的目标, ...
- 一个页面tab标签切换，都有scroll事件的解决办法
当前页有多个tab,如果都有scroll事件, 先解绑$(window).off('scroll') 再执行scroll就不可以了,多个标签就不会互相干扰: 给你们个例子: //标签切换 $(' ...
- hadoop2.5的伪分布式安装配置
一.windows环境下安装 根据博主写的一次性安装成功了: http://blog.csdn.net/antgan/article/details/52067441 二.linux环境下(cento ...
- 2017计算机学科夏令营上机考试-B编码字符串
B:编码字符串 总时间限制: 1000ms 内存限制: 65536kB 描述 在数据压缩中,一个常用的方法是行程长度编码压缩.对于一个待压缩的字符串,我们可以依次记录每个字符及重复的次数.例如,待 ...
- VMWare安装Win10虚拟机
这两天突发奇想安了个win10虚拟机,在安装的过程中还遇到了不少麻烦,所以在此与大家分享下. 首先我们用VMWare12来安装,VMWare已经更新到14但是不太稳定,所以为了保险起见还是用12吧. ...
- 《Clean Code》 代码简洁之道
作者介绍 原文作者: Robert C. Martin, Object Mentor公司总裁,面向对象设计.模式.UML.敏捷方法学和极限编程领域的资深顾问,是<敏捷软件开发:原则.模式.与实践 ...
- Python创建二维数组(关于list的一个小坑)
0.目录 1.遇到的问题 2.创建二维数组的办法 3.1 直接创建法 3.2 列表生成式法 3.3 使用模块numpy创建 1.遇到的问题 今天写Python代码的时候遇到了一个大坑,差点就耽误我交作 ...