【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 ...
随机推荐
- IDEA热部署（二）---jetty插件启动maven项目
jetty插件的配置 我们使用jetty插件来进行启动我们的maven项目,在pom.xml中进行配置: <plugins> <plugin> <groupId>o ...
- Celery 源码解析八：State 和 Result
在前面几篇解析中,我们已经看过了 Worker 是如何运行的,Task 是如何创建的,以及怎么被路由到 Worker 中,除了这些之外,我们还对流量限制,Worker 控制和 Task/Worker ...
- （二）部署solr7.1.0到tomcat
solr7.1.0部署到tomcat8 官方表示solr5之后的版本不再提供对第三方容器的支持(不提供war包了). "旧式"solr.xml格式不再支持,核心必须使用core.p ...
- Elasticsearch6.0及其head插件安装
Elasticsearch6.0及其head插件安装 1.下载并解压elasticsearch 2.修改elasticsearch.yml文件 # 集群的名字 cluster.name: my-app ...
- 【深圳】大湾区第三次.NET技术交流会（网络直播）
活动简介 云.devops.微服务.容器是现在这个发展阶段的软件形态, 本次活动我们围绕这些话题介绍.NET生态下的发展.SQL Server 2017可根据需要运行本地部署的SQL Server,当 ...
- 关于Excel数据批量导入数据库的案例
写这个案例主要是感觉这个功能挺实用,很多地方会用得到的,废话就不多说了,直接上对应的源码. 这个案例我运用的是Winform窗体程序实现数据的导入. 首先是数据库的登陆界面如下: 源码如下: usin ...
- java版Web Socket，实现消息推送
# web socket是什么? WebSocket协议是基于TCP的一种新的网络协议. 它实现了浏览器与服务器全双工(full-duplex)通信,允许服务器主动发送信息给客户端. ## 用途 实时 ...
- Ubuntu 17.04 安装
不忘初心,方得始终. 今天听别人说17.04发布了,我是开心的不得了,赶紧下载了一个,准备安装在自己的本子上.这段时间已经花费了更多的时间在docker和OpenStack上面,没时间看新闻了,因此今 ...
- 实践作业3DAY1
今天,老师又布置了新的学习任务,关于白盒测试.感觉黑盒测试,我们用的比较多,白盒测试就相对陌生了.上课的时候老师虽然也进行了一定的点拨,外加我们学习了SPOC视频,但是并没有看到什么具体的项目,所以实 ...
- 室内地图1：从CAD到Map（画图，发布，路径导航）
首先这个教程整理,比较偏细节. 因为我本身不是做GIS,所以可能有点流水账,当然错漏难免,恳请指正. 当我们做定位的时候,想要可视化展示,室外当然可以直接使用google,百度的底图.对于室内,有两种 ...