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 ...
随机推荐
- C#设计模式-外观模式
在软件开发过程中,客户端程序经常会与复杂系统的内部子系统进行耦合,从而导致客户端程序随着子系统的变化而变化,然而为了将复杂系统的内部子系统与客户端之间的依赖解耦,从而就有了外观模式,也称作 ”门面“模 ...
- Laravel 5.3 auth中间件底层实现详解
1. 注册认证中间件, 在文件 app/Http/Kernel.php 内完成: protected $routeMiddleware = [ 'auth' => \Illuminate\Aut ...
- javascript的快速排序法
在排序方式中,快速是比较普遍使用的,因为其速度快. 因为其是不断的递归,而且是根据基准点的左右两边开始递归,直到数组只有一个值的时候才返回. 这个基准点是自己定的. 一般取中间,比较好理解. < ...
- SQL Server 复制：事务发布
一.背景 在复制的运用场景中,事务发布是使用最为广泛的,我遇到这样一个场景:在Task数据库中有Basic与Group两个表,需要提供这两个表的部分字段给其它程序读取放入缓存,程序需要比较及时的获取到 ...
- OpenCASCADE Linear Extrusion Surface
OpenCASCADE Linear Extrusion Surface eryar@163.com Abstract. OpenCASCADE linear extrusion surface is ...
- WebView 与PC机Chrome配合调试
参考自http://www.cnblogs.com/terrylin/p/4606277.html 移动端WebView开发调试:Chrome远程调试 Chrome DevTools调试移动设备Bro ...
- .Net 转战 Android 4.4 日常笔记（9）--常用组件的使用方法[附源码]
经过两天的学习,把常用的组件都学习了一遍,并做成了App 学习可能真没有捷径,跟学习html有点类似,都是一个控件一个控件学习并使用,最后拼凑成一个系统 链接:http://pan.baidu.com ...
- L2 Population 原理 - 每天5分钟玩转 OpenStack（113）
前面我们学习了 VXLAN,今天讨论跟 VXLAN 紧密相关的 L2 Population. L2 Population 是用来提高 VXLAN 网络 Scalability 的. 通常我们说某个系统 ...
- Html标签的语义化
为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1 <tab ...
- CodeIgniter笔记-去掉index.php
1.修改Apache 的配置文件把LoadModule rewrite_module modules/mod_rewrite.so该行前的#去掉. 2.将 AllowOverride None ,修改 ...