loading动画/animation动画/浏览器前缀
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了loading动画/animation动画/浏览器前缀相关的知识，希望对你有一定的参考价值。
参考技术A loading动画<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading动画</title>
<style type="text/css">
.box
width: 300px;
height: 125px;
border: 1px solid #000;
margin: 200px auto 0;
.box p
text-align: center;
width: 100%;
.box div
width: 30px;
height: 70px;
float: left;
background-color: gold;
margin: 15px;
border-radius: 10px;
.box div:nth-child(1)
background-color: red;
animation: loading 500ms ease 0s infinite alternate;
.box div:nth-child(2)
background-color: green;
animation: loading 500ms ease 100ms infinite alternate;
.box div:nth-child(3)
background-color: pink;
animation: loading 500ms ease 200ms infinite alternate;
.box div:nth-child(4)
background-color: greenyellow;
animation: loading 500ms ease 300ms infinite alternate;
.box div:nth-child(5)
background-color: cyan;
animation: loading 500ms ease 400ms infinite alternate;
@keyframes loading
from
transform: scaleY(1);
to
transform: scaleY(0.5);
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>loading...</p>
</div>
</body>
</html>
animation动画
动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态
infinite不限制次数
alternate动画结束后返回，返回也算次数
animation-fill-mode 动画前后的状态
forwards动画完成保持在最后一帧
backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）
both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）
..........................................................................................................................................................
动画暂停
animation-play-state: paused;
..........................................................................................................................................................
动画运行
animation-play-state: running;
..........................................................................................................................................................
/*定义一个动画，名称为moving*/
@keyframes moving
/*初始状态*/
from
width: 200px;
/*结束状态*/
to
width: 500px;
..........................................................................................................................................................
CSS浏览器前缀兼容写法
Vendor prefix—浏览器引擎前缀，是一些放在CSS属性前的小字符串，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和 Safari浏览器使用的是WebKit渲染引擎，火狐浏览器使用的是Gecko引擎，Internet Explorer使用的是Trident引擎，Opera以前使用Presto引擎，后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前缀标 识的CSS属性，但由于以WebKit为引擎的移动浏览器相当流行，火狐等浏览器在其移动版里也实现了部分WebKit引擎前缀的CSS属性。
浏览器引擎前缀(Vendor Prefix)有哪些？
-moz-/* 火狐等使用Mozilla浏览器引擎的浏览器 */-webkit-/* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */-o-/* Opera浏览器(早期) */-ms-/* Internet Explorer (不一定) */
为什么需要浏览器引擎前缀(Vendor Prefix)？
这些浏览器引擎前缀(Vendor Prefix)主要是各种浏览器用来试验或测试新出现的CSS3属性特征。可以总结为以下3点：
试验一些还未成为标准的的CSS属性——也许永远不会成为标准
对新出现的标准的CSS3属性特征做实验性的实现
对CSS3中一些新属性做等效语义的个性实现
这些前缀并非所有都是需要的，但通常你加上这些前缀不会有任何害处——只要记住一条，把不带前缀的版本放到最后一行：
-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;
有些新的CSS3属性已经试验了很久，一些浏览器已经对这些属性不再使用前缀。Border-radius属性就是一个非常典型的例子。最新版的浏览器都支持不带前缀的Border-radius属性写法。
需要使用Vendor Prefixes的CSS3属性
主要的需要添加浏览器引擎前缀(vendor-prefix)的属性包括：
@keyframes
移动和变换属性(transition-property, transition-duration, transition-timing-function, transition-delay)
动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)
border-radius
box-shadow
backface-visibility
column属性
flex属性
perspective属性
完整的列表不只这些，而且还会增加。
浏览器引擎前缀(vendor-prefix)的用法
当需要使用浏览器引擎前缀(vendor-prefix)时，最好是把带有各种前缀的写法放在前面，然后把不带前缀的标准的写法放到最后。比如：
/* 简单属性 */.myClass-webkit-animation-name: fadeIn;-moz-animation-name: fadeIn;-o-animation-name: fadeIn;-ms-animation-name: fadeIn;animation-name: fadeIn;/* 不带前缀的放到最后 *//* 复杂属性 keyframes */@-webkit-keyframes fadeIn0%opacity: 0;100%opacity: 0;@-moz-keyframes fadeIn0%opacity: 0;100%opacity: 0;@-o-keyframes fadeIn0%opacity: 0;100%opacity: 0;@-ms-keyframes fadeIn0%opacity: 0;100%opacity: 0;/* 不带前缀的放到最后 */@keyframes fadeIn0%opacity: 0;100%opacity: 0;
Internet Explorer
Internet Explorer 9 开始支持很多(但并不是全部)CSS3里的新属性。比如，你也可以在IE里使用不带浏览器引擎前缀(vendor-prefix)的border-radius属性。
IE6到IE8都不支持CSS3，很遗憾的是，使用这些低版本浏览器的用户还很多。所以，确保你的网站设计在不支持CSS3的情况下也能正常显示。对于一些属性：border-radius,linear-gradient, 和box-shadow, 你可以使用 CSS3Pie ，它是一个很小的文件，把它放到你的网站的根目录下，就能让你的页面中IE6，IE8中也支持这些属性。
android中的动画之变换动画（Tween Animation）
android中有四大动画，它们分别是：变换动画（Tween Animation），帧动画（frame Animation），布局动画（layout Animation）,属性动画（Property Animation ）。今天我在这里简单的说下变换动画。
首先我们来说下animation种的那些属性（这些都是动画中的通用属性）
| xml属性 | java方法 | 解释 |
| android：detachWallpaper | setDetachWallpaper（booean） | 是否在在壁纸上运行 |
| android：duration | setDuration（long） | 动画持续时间，单位为毫秒 |
| android：fillAfter | setFillAfter(boolean) | 控件结束后是否保持动画最后的状态 |
| android：fillBefore | setFillBefore（boolean） | 控件结束后是否还原到开始动画的状态 |
|
android:fillEnabled
|
setFillEnabled(boolean) | 与android:fillBefore效果相同 |
| android:interpolator | setInterpolator(Interpolator) | 设定插值器（指定的动画效果，譬如回弹等） |
| android:repeatCount | setRepeatCount(int) | 重复次数 |
| android:repeatMode | setRepeatMode(int) | 重复类型有两个值，reverse表示倒序回放，restart表示从头播放 |
| android:startOffset | setStartOffset(long) | 调用start函数之后等待开始运行的时间，单位为毫秒 |
|
android:zAdjustment
|
setZAdjustment(int) | 表示被设置动画的内容运行时在Z轴上的位置（top/bottomT67M.gif) rmal），默认为normal |
变换动画中分为4种：透明度动画，缩放动画，旋转动画，位移动画
以上是关于loading动画/animation动画/浏览器前缀的主要内容，如果未能解决你的问题，请参考以下文章
HTML+CSS+JS实现 ❤️制作loading动画效果❤️