【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 ...
随机推荐
- ajax异步传送数据的方法
1, 此方法为ajax异步发送后台数据的方法 var payment_id=$(this).attr("name"); alert(payment_id); $('.label') ...
- listview相关代码整理
虽然listview已经慢慢被替代了, 不过还是整理下 , 留作纪念吧 /** * 获取 listview 实际滚动的距离. [ 相对于listview的第一个项目左上角.] * * @return ...
- Winform控件Tag使用规范
背景 Tag在WinForm控件中经常被用来存储临时数据,类型为object,但是当程序中多个地方使用到Tag时,容易造成Tag使用的混乱,Tag是如此重要的一个属性,应该要好好考虑下如何有效的使用T ...
- 深入了解Android蓝牙Bluetooth——《进阶篇》
在 [深入了解Android蓝牙Bluetooth--<基础篇>](http://blog.csdn.net/androidstarjack/article/details/6046846 ...
- nomad的简易集群
启动服务器 第一步是为服务器创建配置文件.无论是从下载的文件github,或粘贴到一个名为server.hcl: vim server.hcl # Increase log verbosity log ...
- poj2485 highwaysC语言编写
/*HighwaysTime Limit: 1000MSMemory Limit: 65536KTotal Submissions: 33595Accepted: 15194DescriptionTh ...
- 对NumPy中dot()函数的理解
今天学习到numpy基本的运算方法,遇到了一个让我比较难理解的问题.就是dot函数是如何对矩阵进行运算的. 一.dot()的使用 参考文档:https://docs.scipy.org/doc/num ...
- Office 365系列 (1)概览:完整的云中Office
Office365(以下简称O365)是一个集Office,企业邮箱,日历,日程管理,音视频会议 ,企业网盘 ,企业协作平台为一体的,旨在提高团队办公效率,减少基础设施投资和IT运维压力的解决方案.在 ...
- 第四届河南省ACM 表达式求值 栈
表达式求值 时间限制: 1 Sec 内存限制: 128 MB 提交: 14 解决: 7 [提交][状态][讨论版] 题目描述 Dr.Kong设计的机器人卡多掌握了加减法运算以后,最近又学会了一些简 ...
- C++反汇编第五讲,认识多重继承,菱形继承的内存结构,以及反汇编中的表现形式.
C++反汇编第五讲,认识多重继承,菱形继承的内存结构,以及反汇编中的表现形式. 目录: 1.多重继承在内存中的表现形式 多重继承在汇编中的表现形式 2.菱形继承 普通的菱形继承 虚继承 汇编中的表现形 ...