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 ...
随机推荐
- WCF学习之旅——第一个WCF示例（一）
最近需要用到WCF,所以对WCF进行了解.在实践中学习新知识是最快的,接下来先做了一个简单的WCF服用应用示例. 本文的WCF服务应用功能很简单,却涵盖了一个完整WCF应用的基本结构.希望本文能对那些 ...
- Github团队开发集成以及eclipse集成
温馨提示:本篇是用于团队开发协作的github,如果是单人的可以移步本系列另外一篇 集成eclipse较为简单 团队仓库目录结构 TestOrgName xxxsystem configs dbscr ...
- CSS系列：CSS中盒子之间的关系
1. 标准文档流 标准文档流是值在不使用其他的雨排列和定位相关的特殊CSS规则时,各种元素的排列规则. 1.1 块级元素(block level) 块级元素不会排在同一行中,总是以一个块的形式表现出来 ...
- GoldenGate碎碎念
1. 在启动mgr进程的过程中报如下错误 GGSCI (node1.being.com) > start mgr Cannot - No such file or directory Canno ...
- Repository 返回 IQueryable？还是 IEnumerable？
这是一个很有意思的问题,我们一步一步来探讨,首先需要明确两个概念(来自 MSDN): IQueryable:提供对未指定数据类型的特定数据源的查询进行计算的功能. IEnumerable:公开枚举数, ...
- mysql乐观锁总结和实践--转
原文地址:http://chenzhou123520.iteye.com/blog/1863407 上一篇文章<MySQL悲观锁总结和实践>谈到了MySQL悲观锁,但是悲观锁并不是适用于任 ...
- react-native 学习之Image篇
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import Rea ...
- python mock基本使用
什么是mock? mock在翻译过来有模拟的意思.这里要介绍的mock是辅助单元测试的一个模块.它允许您用模拟对象替换您的系统的部分,并对它们已使用的方式进行断言. 在Python2.x 中 mock ...
- HTTP在.NET中的一些应用和解析
谈到HTTP协议(超文本传输协议),HTTP协议是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接的机制,绝大多数的Web开发,都是构建在 ...
- Node.js、express、mongodb 实现分页查询、条件搜索
前言 在上一篇Node.js.express.mongodb 入门(基于easyui datagrid增删改查) 的基础上实现了分页查询.带条件搜索. 实现效果 1.列表第一页. 2.列表第二页 3. ...