CSS中animate属性
我记得，在工作中直接使用animation，只要能做出动画就完了，根本没有看每一个细节。
其实，这样做对于我们来说，的确没有错，因为工作中没有时间给你看每一个细节，大致看一篇就没下文了。
当我们想要好好理清头绪时，我才会想起以前见过的每一个知识点，然而这样做也没有错，但是这样做很明显不是明智的选择。
我觉得做一件事，都有一个计划，只有计划好，不懂得标记好，后面慢慢的一个个地解决，才会不落下学习的要点，好了，不说了，要睡了
animation-name表示为 @keyframes 动画规定名称;
语法：animation-name :keyframename|none;
animation-duration表示动画完成一个周期所需要的时间;
语法：animation-duration: time;
animation-timing-function 表示规定动画的速度（speed）;
语法：animation-timing-function: value;
value有哪些：linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)；
animation-fill-mode表示填充模式;
语法：animation-fill-mode : none | forwards | backwards | both;
animation-delay 表示动画即将开始。
语法：animation-delay: time;
animation-iteration-count表示播放动画次数;
语法：animation-iteration-count:n|infinite(无限循环);
animation-direction表示重复一次动画，也可以来回的运动并重复。
语法：animation-direction: normal|alternate;
animation: name duration timing-function delay iteration-count direction;
<!-- 参考学习http://www.w3school.com.cn/cssref/pr_animation.asp -->
<html>
<head>
<style>
body{
background-color:rgba(31,11,71,.8)
}
.circle{
position:absolute;
left:46%;
top:30%;
width:20px;
height:20px;
border-radius:15px;
background-color:rgba(21,21,29,.7);
-webkit-animation:myname 2s linear infinite;
animation:myname 7s linear infinite;
}
@keyframes myname {
0% {
left:46%;
top:30%;
} 25% {
left:56%;
top:20%;
} 50% {
left:66%;
top:40%;
} 75% {
left:56%;
top:60%;
} 100% {
left:46%;
top:30%;
}
}
@-webkit-keyframes myname {
0% {
left:46%;
top:30%;
} 25% {
left:56%;
top:20%;
} 50% {
left:66%;
top:40%;
} 75% {
left:56%;
top:60%;
} 100% {
left:46%;
top:30%;
}
}
h1{
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
CSS中animate属性的更多相关文章
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS中 Zoom属性
CSS中 Zoom属性 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除 ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- CSS中box-sizing属性的理解与部分用法
今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...
- css中clip-path属性的运用
今天看到一位同学的需求,要在一个div中加一个小尖尖,对话时发的图片,旁边这个三角是怎么实现与图片的颜色一致,效果如下: 当然,解决这个问题有各种奇淫巧技,现在我们来看一个css属性clip-path ...
- 区分html与css中的属性
CSS中id与Class的区别 1.在CSS文件里书写时,ID加前缀"#":CLASS用"." 2.id一个页面只可以使用一次:class可以多次引用. 3.I ...
随机推荐
- Android 动画 setVisibility 后出错解决方法
===先说明下背景. 写的是个ListView 设置 adapter,并在列表末尾显示加载更多,点击 加载更多 时, 变成一个 圆环形的加载动画和 正在加载. 说明下,这个 加载动画是自己做得,一个圆 ...
- 6.cadence原理图下[原创]
一.平坦式原理图与分页式原理图 1 和2为平坦式原理图,平等 1和3为分页式原理图 有上下关系 ------------------------------------ 1.平坦式原理图 每张原理 ...
- [HDOJ3466]Proud Merchants（贪心+01背包）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3466 n个商人,每个商人有一个物品,物品有价格p.价值v还有一个交易限制q.q的意义是假如你现在拥有的 ...
- MFC弹出菜单隐藏解决
http://social.msdn.microsoft.com/Forums/en-US/5482103e-272b-4c9f-bac4-be15f14782bd/cmfcmenubar-remov ...
- 【转载】关于XML文档的xmlns、xmlns:xsi和xsi:schemaLocation
原文在: https://yq.aliyun.com/articles/40353 这里有转载:http://www.cnblogs.com/zhao1949/p/5652167.html 先来一段S ...
- MoreLinq和Linq
MoreLinq里的Batch和Partition不知道什么区别. var ints =Enumerable.Range(1,10); var result = ints.Batch(3); var ...
- Qt之QHeaderView添加复选框
简述 前面分享了QTableView中如何添加复选框.本节主要介绍QTableView中的表头-QHeaderView添加复选框的功能,下面以水平表头为例,垂直表头类似! 简述 效果 QHeaderV ...
- HDU 1072 (不一样的入队条件) Nightmare
之前的BFS都是需要一个标记数组,但这个题不一样,因为可能一个格子不止走一次. 那么我们就要寻找新的入队条件:left比上次经过的时候大才入队(left表示上次经过该点时剩余的时间). 为什么呢?我们 ...
- Yii2 CSRF
一.CSRF 即Cross-site request forgery跨站请求伪造,是指有人冒充你的身份进行一些恶意操作. 比如你登录了网站A,网站A在你的电脑设置了cookie用以标识身份和状态,然后 ...
- [Swift系列]001-入门准备
[引子] 最新的苹果发布会上公布了新的苹果编程语言Swift,并且演示了Xcode 6 Beta的一些新功能. 据苹果公司称,这个新语言开放的API更多,实用起来更方便,总之是值得学习.使用,比C/o ...