CSS3的自定义动画帧
CSS3新增的动画帧非常绚丽，可以简单实现一些动画效果，目前除IE外各大主流浏览器都支持
本文演示三个：transform: scale3d(x, y, z)-缩放;、transform: translate3d(x, y, z)-位移;、transform:rotateX/Y(?deg)-旋转;
演示地址:http://wjf444128852.github.io/demo02/css3/index.html
@keyframes 动画名{}
@-处理兼容性-keyframes
animation: expand 0.6s ease-out infinite;[动画名 动画执行时间 动画速度 动画次数]
-处理兼容-animation:
<html lang="en"><head>
<meta charset="UTF-8">
<title>CSS3</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="parent">
<div class="main"></div>
<div class="d2"></div>
<div class="d3">A</div>
</div> </body></html>
html,body{
width: 98%;
height: 98%;
}
/*方法二*/
body{
display: flex;
align-items: center;/****水平居中****/
justify-content: center;/*垂直居中*/
}
.parent{
overflow: hidden;
width: 500px;
height: 400px;
background: orange;
/*方法一*/
/*margin: 0 auto;*/
position: relative;
/*top: 50%;*/
/*margin-top: -200px;*//***此行等于transform:translateY(-50%)******/
}
.parent div{
width: 100px;
height:100px;
margin: 0 auto;
margin-top: 20px;
}
.main{
position: relative;
/*top:150px;*/
background: pink;
-webkit-animation: expand 0.6s ease-out infinite;
-moz-animation: expand 0.6s ease-out infinite;
-o-animation: expand 0.6s ease-out infinite;
-ms-animation: expand 0.6s ease-out infinite;
animation: expand 0.6s ease-out infinite;
}
.d2{
background: green;
-webkit-animation: bounce 3s ease-out infinite;
-moz-animation: bounce 3s ease-out infinite;
-o-animation: bounce 3s ease-out infinite;
-ms-animation: bounce 3s ease-out infinite;
animation: bounce 3s ease-out infinite;
}
@keyframes bounce {
0% {
transform: translate3d(0, -25px, 0);
opacity:;
}
25% {
transform: translate3d(0, 10px, 0);
}
50% {
transform: translate3d(0, -6px, 0);
}
75% {
transform: translate3d(0, 2px, 0);
}
100% {
transform: translate3d(0, 0, 0);
opacity:;
}
}
@-webkit-keyframes bounce {
0% {
transform: translate3d(0, -25px, 0);
opacity:;
}
25% {
transform: translate3d(0, 10px, 0);
}
50% {
transform: translate3d(0, -6px, 0);
}
75% {
transform: translate3d(0, 2px, 0);
}
100% {
transform: translate3d(0, 0, 0);
opacity:;
}
}
@-moz-keyframes bounce {
0% {
transform: translate3d(0, -25px, 0);
opacity:;
}
25% {
transform: translate3d(0, 10px, 0);
}
50% {
transform: translate3d(0, -6px, 0);
}
75% {
transform: translate3d(0, 2px, 0);
}
100% {
transform: translate3d(0, 0, 0);
opacity:;
}
}
@-o-keyframes bounce {
0% {
transform: translate3d(0, -25px, 0);
opacity:;
}
25% {
transform: translate3d(0, 10px, 0);
}
50% {
transform: translate3d(0, -6px, 0);
}
75% {
transform: translate3d(0, 2px, 0);
}
100% {
transform: translate3d(0, 0, 0);
opacity:;
}
}
@keyframes expand {
0% {
transform: scale3d(1, 0, 1);
}
25% {
transform: scale3d(1, 1.2, 1);
}
50% {
transform: scale3d(1, 0.85, 1);
}
75% {
transform: scale3d(1, 1.05, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes expand {
0% {
transform: scale3d(1, 0, 1);
}
25% {
transform: scale3d(1, 1.2, 1);
}
50% {
transform: scale3d(1, 0.85, 1);
}
75% {
transform: scale3d(1, 1.05, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@-moz-keyframes expand {
0% {
transform: scale3d(1, 0, 1);
}
25% {
transform: scale3d(1, 1.2, 1);
}
50% {
transform: scale3d(1, 0.85, 1);
}
75% {
transform: scale3d(1, 1.05, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@-o-keyframes expand {
0% {
transform: scale3d(1, 0, 1);
}
25% {
transform: scale3d(1, 1.2, 1);
}
50% {
transform: scale3d(1, 0.85, 1);
}
75% {
transform: scale3d(1, 1.05, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
/*transform:rotate3d(x,y,z,deg);*/
/*transform:rotate3d(1，1,0,45deg);*/
.d3{
background: #e4393c;
-webkit-animation: move 3s linear infinite;
-moz-animation: move 3s linear infinite;
-ms-animation: move 3s linear infinite;
-o-animation: move 3s linear infinite;
animation: move 3s linear infinite;
}
@-o-keyframes move{
25%{
transform:rotateY(45deg);
}
50%{
transform:rotateY(360deg);
}
75%{
transform:rotateX(45deg);
}
100%{
transform:rotateX(180deg);
}
}
@-moz-keyframes move{
25%{
transform:rotateY(45deg);
}
50%{
transform:rotateY(360deg);
}
75%{
transform:rotateX(45deg);
}
100%{
transform:rotateX(180deg);
}
}
@-webkit-keyframes move{
25%{
transform:rotateY(45deg);
}
50%{
transform:rotateY(360deg);
}
75%{
transform:rotateX(45deg);
}
100%{
transform:rotateX(180deg);
}
}
@keyframes move{
25%{
transform:rotateY(45deg);
}
50%{
transform:rotateY(360deg);
}
75%{
transform:rotateX(45deg);
}
100%{
transform:rotateX(180deg);
}
}
CSS3的自定义动画帧的更多相关文章
- 【转】CSS3动画帧数科学计算法
本文来源于:财付通TID 原作者:bboy90 总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . —————————————————————– 华丽丽的开篇 ...
- CSS3初学篇章_6(自定义动画)
自定义动画 由于有一部分低版本的浏览器并不支持的问题,所以这个样式要多做兼容,各大浏览器兼容前缀如下: 前缀 浏览器 -webkit chrome和safari -moz firefox - ...
- CSS3 自定义动画（animation）
除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外,CSS3 还有一种自由度更大的自定义动画,开发者甚至可以使用变形(transfor ...
- CSS3实现自定义Checkbox动画
CSS3实现自定义Checkbox动画是一款CSS3自定义checkbox,而且这款checkbox还带有动画效果,当你选中checkbox的时候,会以动画的方式打上一个大大的勾. 源码下载:http ...
- css3动画帧
动画帧实现: css3使用steps来实现逐帧动画,动画过程中可能出现抖动,实乃精度偏差问题. 通常在动画里用到百分比单位时会出现抖动或位移现象,解决方法就是转换成具体的rem或px长度单位. 动画一 ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- velocity自定义动画
话说好久没有写博客了,零星的整理了一些东西,没有形成系统,所以也没有在这里记录. 废话不多说了,进入今天的正题.不知道大家是否记得之前写过的一篇文章<制作炫酷的专题页面& ...
- Unity 3D 动画帧事件
前几天在项目开发中碰到一个这样的需求,RPG游戏中,特效和动画播放不同步的.假如主角在攻击NPC时,先实例化特效,后播放动画.动画毕竟是有一个时间长度的.等到动画播放攻击挥刀的那一瞬间时,特效可能早就 ...
- CSS3/jQuery自定义弹出窗口
简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...
随机推荐
- Android笔记——关于Cursor类的介绍
使用过 SQLite数据库的童鞋对 Cursor 应该不陌生,加深自己和大家对Android 中使用 Cursor 的理解. 关于 Cursor 在你理解和使用 Android Cursor 的时候你 ...
- HTTP学习二：Web应用中的HTTP
1 HTTP连接 1.1 TCP连接对性能的影响 TCP三次握手如下图: 如上图,建立一次TCP连接要经过三个步骤.HTTP是建立在TCP之上的,因此TCP连接的性能直接影响HTTP的性能. TCP影 ...
- 一篇通俗易懂的CSS层叠顺序与层叠上下文研究
网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...
- Android获取可存储文件所有路径
引言:大家在做app开发的时候,基本都会保存文件到手机,android存储文件的地方有很多,不像ios一样,只能把文件存储到当前app目录下,并且android手机由于厂家定制了rom,sdcard的 ...
- 应用程序框架实战十一:创建VS解决方案与程序集
上一篇,介绍了开发环境需要的工具和版本,本篇将动手创建VS解决方案. 对于本系列文章提供的示例,我想通过两种途径来演示,一种是单元测试,另外为了能更直观的看到效果,还会提供一个用户界面来展示.为了不分 ...
- C/C++,彩色图像小游戏。
这里声明,这个游戏是由本人,在大一暑假自作的第二个小游戏,转载请注明原帖地址,谢谢! 所有图片都是我一个人用ps搞出来的,比较简单.........毕竟不是学图像制作的,请体谅!另外,图片 不放出来了 ...
- virtualbox搭建ubuntu server nginx+mysql+tomcat web服务器1 (未完待续)
virtualbox搭建ubuntu server nginx+mysql+tomcat web服务器1 (未完待续) 第一次接触到 linux,不知道linux的确很强大,然后用virtualbox ...
- DotNet处理服务器路径的方法
项目中需要使用到路径处理的地方比较多,对于路径的解析和匹配有时较为繁琐,现在提供一个对路径进行解析的方法: 1.验证设置路径字符串: /// <summary> /// 验证设置路径字符串 ...
- Android之实现ViewPagerIndicator
PS:最近一直忙于学习任务,一直没有时间去写博客.今天周六,终于有时间了. 学习任务: 1.打造一个自己的ViewPagerIndicator 最近被安排了一大堆的学习任务,感觉老板还是很好的,让 ...
- CloudNotes云端个人笔记系统系列文章汇总
[CloudNotes版本更新信息与下载地址:http://cloudnotes.cloudapp.net/webapi/Home/Release] [CloudNotes RESTful API帮助 ...