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 ...
随机推荐
- Nginx服务器之 Nginx的基本配置
本文使用 Linux centos系统 一.Nginx虚拟主机的配置 虚拟主机:通常情况下,为了使每个服务器可以供更多用户使用,可以将一个服务器分为很多虚拟的子服务器,每个子服务器都是互相独立的.这些 ...
- C++构造函数和析构函数
构造函数简介 在上一个章节我们在创建好类的对象之后,首先对它的每一个成员属性赋值之后再对它们进行输出操作,如果不赋值就输出,这些值就会是垃圾值.而为了代码的简介,一次性为所有成员属性初始化,C++的类 ...
- LINQ系列：Linq to Object串联操作符
串联是一个将两个对象联接在一起的过程.在LINQ中,串联操作将两个集合合并成一个集合,通过Concat操作符实现. Concat 1>. 原型定义 public static IQueryabl ...
- 移动web app开发必备 - Deferred 源码分析
姊妹篇 移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...
- vue实例属性（vm.$els）
不需要表达式 参数: id(必需) 用法: 为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素. 注意: 因为 HTML 不区分大小写,camelCase 名字比如 v-el:s ...
- 【原创】开源Math.NET基础数学类库使用(01)综合介绍
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...
- __weak 和 __block 区别
Blocks理解: Blocks可以访问局部变量,但是不能修改 如果修改局部变量,需要加__block __block int multiplier = 7; int (^myBlock)(int) ...
- iOS 如何设置导航的滑动返回手势， 和系统饿一样
iOS 7 滑动返回那些事儿 2014/05/17 Wei .entry-meta .entry-header 在智能机越来越普及,屏幕越做越大的当下,滑动返回手势已经成为了一个应用的标配功能,甚至可 ...
- java多线程--定时器Timer的使用
定时的功能我们在手机上见得比较多,比如定时清理垃圾,闹钟,等等.定时功能在java中主要使用的就是Timer对象,他在内部使用的就是多线程的技术. Time类主要负责完成定时计划任务的功能,就是在指定 ...
- HTML5知识初级题目
在 HTML5 中,onblur 和 onfocus 是: 在 HTML5 中,哪个元素用于组合标题元素? HTML5 中不再支持下面哪个元素? HTML5 中不再支持下面哪个元素? HTML5 之前 ...