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 ...
随机推荐
- Excel 导入到Datatable 中，再使用常规方法写入数据库
首先呢?要看你的电脑的office版本,我的是office 2013 .为了使用oledb程序,需要安装一个引擎.名字为AccessDatabaseEngine.exe.这里不过多介绍了哦.它的数据库 ...
- SQL Server 数据库子查询基本语法
一.SQL子查询语句 1.单行子查询 select ename,deptno,sal from emp where deptno=(select deptno ...
- HTML5的实用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #ffffff } p.p2 ...
- 设置Distribution clean up 每次删除Command的数量
Replication Job “Distribution clean up: distribution” 默认设置是,每10minutes运行一次,每次删除2000个Command.这对于有1.9亿 ...
- NodeJS POST Request Over JSON-RPC
1.npm install art-template2.npm install request3.在app.js中加入以下代码转html: var template = require('art-t ...
- Win10系统菜单打不开问题的解决，难道是Win10的一个Bug ?
Win10左下角菜单打不开,好痛苦,点击右下角的时间也没反应,各种不爽,折磨了我好几天,重装又不忍心,实在费劲,一堆开发环境要安装,上网找了很多方法都不适用.今天偶然解决了,仔细想了下,难道是Win1 ...
- （转）使用minicpan创建本地CPAN
在临时的办公场所网络不畅,有时不能下载cpan上的软件包,所有只能自建一个cpan. 这里使用了工具'minicpan',简单地说:就是把互联网上的CPAN搬到自己的电脑里,它的最初想法来自Randa ...
- CRL开发框架发布2.2版
CRL 2.3.0.0 CRL是一个面向对象的轻便型ORM业务框架 数据处理使用了对象/数据映射,采用Lambda表达式来表示条件查询,增加了可编程性和可靠性,出错机率低,同时也能用原生的SQL实现查 ...
- 如何添加并设置远程桌面（RD）授权服务器
上一篇日志中介绍了如何将现成的远程桌面授权服务器添加到对应的远程桌面回话主机中. 本篇日志将引导您如何添加配置相应的远程桌面授权服务器,这样就可以根据所购买的授权类型和授权级别添加需要甚至" ...
- Hive启动报错： Found class jline.Terminal, but interface was expected
报错: [ERROR] Terminal initialization failed; falling back to unsupported java.lang.IncompatibleClassC ...