首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

css3动画效果小结(推荐)

Posted in HTML / CSS onJuly 25, 2016

css3的动画功能有以下三种:

1、transition(过度属性)
2、animation(动画属性)
3、transform(2D/3D转换属性)

下面逐一进行介绍我的理解：

1、transition:<过渡属性名称> <过渡时间> <过渡模式>

如-webkit-transition:color 1s;

等同于:

-webkit-transition-property:color;

-webkit-transition-duration:1s;

多个属性的过渡效果可以这样写：

方法1：-webkit-transition:<属性1> <时间1> ,<属性2> <时间2> ,。。。

方法2：

-webkit-transition:<属性1> <时间1>;

-webkit-transition:<属性2> <时间2>;

 

transition-timing-function属性值有5个:

ease:缓慢开始，缓慢结束

liner:匀速

ease-in:缓慢开始

ease-out:缓慢结束

ease-in-out:缓慢开始，缓慢结束（和ease稍有区别）

实例：
transition过渡效果

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>transition过渡效果</title>  
  6.     <style>  
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         #box{   
  12.             width: 200px;   
  13.             height: 200px;   
  14.             background-color: chocolate;   
  15.             position: relative;   
  16.             left: 0px;   
  17.             top: 0px;   
  18.             transition: top 5s ease,left 5s ease ;   
  19.             -moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */   
  20.             -webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */   
  21.             -o-transition: top 5s ease,left 5s ease ; /* Opera */   
  22.         }   
  23.         .btn{   
  24.             width: 512px;   
  25.             margin: 0 auto;   
  26.             border: 2px solid #e3e3e3;   
  27.             border-radius: 5px;   
  28.             padding: 10px;   
  29.   
  30.         }   
  31.         .btn button{   
  32.             width: 80px;   
  33.             height: 40px;   
  34.             text-align: center;   
  35.             line-height: 40px;   
  36.             margin-right: 20px;   
  37.         }   
  38.         button:last-child{   
  39.             margin-right: 0px;   
  40.         }   
  41.     </style>  
  42.     <script>  
  43.         window.onload=function(){   
  44.             var e1 = document.getElementById("e1");   
  45.             var e2 = document.getElementById("e2");   
  46.             var e3 = document.getElementById("e3");   
  47.             var e4 = document.getElementById("e4");   
  48.             var e5 = document.getElementById("e5");   
  49.             var box = document.getElementById("box");   
  50.             e1.onclick=function(){   
  51.                 box.style.left = 1000+"px";   
  52.                 box.style.top = 100+"px";   
  53.                 box.style.transitionTimingFunction="ease";   
  54.             };   
  55.             e2.onclick=function(){   
  56.                 box.style.right = 0+"px";   
  57.                 box.style.top = 0+"px";   
  58.                 box.style.transitionTimingFunction="liner";   
  59.             };   
  60.             e3.onclick=function(){   
  61.                 box.style.right = 1000+"px";   
  62.                 box.style.top = 100+"px";   
  63.                 box.style.transitionTimingFunction="ease-in";   
  64.             };   
  65.             e4.onclick=function(){   
  66.                 box.style.left = 0+"px";   
  67.                 box.style.top = 0+"px";   
  68.                 box.style.transitionTimingFunction="ease-out";   
  69.             };   
  70.             e5.onclick=function(){   
  71.                 box.style.left = 1000+"px";   
  72.                 box.style.top = 100+"px";   
  73.                 box.style.transitionTimingFunction="ease-in-out";   
  74.             };   
  75.   
  76.         }   
  77.     </script>  
  78. </head>  
  79. <body>  
  80.     <div id="box"></div>  
  81.     <br>  
  82.     <br>  
  83.     <br>  
  84.     <br>  
  85.     <br>  
  86.     <br>  
  87.     <hr>  
  88.     <br>  
  89.     <br>  
  90.     <br>  
  91.     <div class="btn">  
  92.         <button id="e1">ease</button>  
  93.         <button id="e2">liner</button>  
  94.         <button id="e3">ease-in</button>  
  95.         <button id="e4">ease-out</button>  
  96.         <button id="e5">ease-in-out</button>  
  97.     </div>  
  98. </body>  
  99. </html>  

2、动画属性animation

animation: name duration timing-function delay iteration-count direction;

值 描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

@keyframes animationname {keyframes-selector {css-styles;}}

值 描述
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

例如：

CSS Code复制内容到剪贴板

  1. animation:mymove 5s infinite;   

  2.   

  3. @keyframes mymove{   

  4.   

  5. from{ 

    top:0px; }   
  6.   

  7. to{ 

    top:200px; }   
  8.   

  9. }  

还可以这么写：

CSS Code复制内容到剪贴板

  1. @keyframes mymove{   

  2.   

  3. 0%{ 

    top:0px; }   
  4.   

  5. 25%{ 

    top:200px; }   
  6.   

  7. 50%{ 

    top:100px; }   
  8.   

  9. 75%{ 

    top:200px; }   
  10.   

  11. 100%{ 

    top:0px; }   
  12.   

  13. }   

 案例：
css3的animation效果

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>    
  5. div   
  6. {   
  7. width:100px;   
  8. height:100px;   
  9. background:red;   
  10. position:relative;   
  11. animation:mymove 5s infinite;   
  12. -moz-animation:mymove 5s infinite; /* Firefox */   
  13. -webkit-animation:mymove 5s infinite; /* Safari and Chrome */   
  14. -o-animation:mymove 5s infinite; /* Opera */   
  15. }   
  16.   
  17. @keyframes mymove   
  18. {   
  19. from {top:0px;}   
  20. to {top:200px;}   
  21. }   
  22.   
  23. @-moz-keyframes mymove /* Firefox */   
  24. {   
  25. from {top:0px;}   
  26. to {top:200px;}   
  27. }   
  28.   
  29. @-webkit-keyframes mymove /* Safari and Chrome */   
  30. {   
  31. from {top:0px;}   
  32. to {top:200px;}   
  33. }   
  34.   
  35. @-o-keyframes mymove /* Opera */   
  36. {   
  37. from {top:0px;}   
  38. to {top:200px;}   
  39. }   
  40. </style>  
  41. </head>  
  42. <body>  
  43.   
  44. <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>  
  45.   
  46. <div></div>  
  47.   
  48. </body>  
  49. </html>  

3、设置3D场景（即transform）

-webkit-perspective:800;(单位为像素)--即三维物体距离屏幕的距离。

-webkit-perspective-origin:50% 50%;(这个属性代表了人眼观察的视野。50% 50%为X轴、Y轴相应的位置，即屏幕的正中央。)

 

css3动画效果小结(推荐)

使用transform属性调整元素：-webkit-transform-style:-webkit-perserve-3d;(这个属性是告诉浏览器我们是在一个三维空间中对元素进行操作)

(1)、translate(移动距离)

translateX（x px）

translateY（y px）

translateZ（z px）

(2)、rotate(旋转角度)

rotateX(x deg)

rotateY(y deg)

rotateZ(z deg)

 

css3动画效果小结(推荐)

transform：rotate（45deg）

rotateX:向屏幕上边沿向内旋转为正方向。

rotateY:向屏幕竖直向下为正方向。

rotateZ:向屏幕外为正方向。

一个div块，右边沿向屏幕内旋转45deg,即应设置为：Transform：rotateY（45deg）。

实例：

transform3D转换效果

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>transform3D转换效果</title>  
  6.     <style>  
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         #box{   
  12.             width: 200px;   
  13.             height: 200px;   
  14.             background-color: chocolate;   
  15.             position: relative;   
  16.             left: 0px;   
  17.             top: 0px;   
  18.             perspective:800px;   
  19.             perspective-origin:50% 50%;   
  20.             transform-style: preserve-3d;   
  21.             transform-origin:0% 100%;//以Y轴为旋转中心   
  22.         }   
  23.         p{   
  24.             margin:20px 520px;   
  25.         }   
  26.         .btn{   
  27.             width: 300px;   
  28.             margin: 0 auto;   
  29.             border: 2px solid #e3e3e3;   
  30.             border-radius: 5px;   
  31.             padding: 10px;   
  32.   
  33.         }   
  34.         .btn button{   
  35.             width: 80px;   
  36.             height: 40px;   
  37.             text-align: center;   
  38.             line-height: 40px;   
  39.             margin-right: 20px;   
  40.         }   
  41.         button:last-child{   
  42.             margin-right: 0px;   
  43.         }   
  44.     </style>  
  45.     <script>  
  46.         window.onload=function(){   
  47.             var tx = document.getElementById("tx");   
  48.             var ty = document.getElementById("ty");   
  49.             var tz = document.getElementById("tz");   
  50.             var rx = document.getElementById("rx");   
  51.             var ry = document.getElementById("ry");   
  52.             var rz = document.getElementById("rz");   
  53.             var box = document.getElementById("box");   
  54.             tx.onclick=function(){   
  55.                 box.style.transform = "translateX(500px)";   
  56.             };   
  57.             ty.onclick=function(){   
  58.                 box.style.transform = "translateY(400px)"  
  59.             };   
  60.             rx.onclick=function(){   
  61.                 box.style.transform = "rotateX(30deg)"  
  62.             };   
  63.             ry.onclick=function(){   
  64.                 box.style.transform = "rotateY(30deg)"  
  65.             };   
  66.             rz.onclick=function(){   
  67.                 box.style.transform = "rotateZ(30deg)"  
  68.             };   
  69.         }   
  70.     </script>  
  71. </head>  
  72. <body>  
  73.     <div id="box"></div>  
  74.     <br>  
  75.     <br>  
  76.     <br>  
  77.     <br>  
  78.     <br>  
  79.     <br>  
  80.     <hr>  
  81.     <br>  
  82.     <br>  
  83.     <br>  
  84.     <p>translate(移动距离)</p>  
  85.     <div class="btn">  
  86.         <button id="tx">translateX</button>  
  87.         <button id="ty">translateY</button>  
  88.     </div>  
  89.     <p>rotate(旋转角度)</p>  
  90.     <div class="btn">  
  91.         <button id="rx">rotateX</button>  
  92.         <button id="ry">rotateY</button>  
  93.         <button id="rz">rotateZ</button>  
  94.     </div>  
  95. </body>  
  96. </html>  

使用transform-origin属性调整旋转中心。默认旋转中心点为div盒子的正中心。

这个旋转中心是可以改变的：

X轴：left、center、right.

Y轴：top、center、bottom.

Z轴：length px(一个长度值)。

以上这篇css3动画效果小结(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

原文地址：http://www.cnblogs.com/gaotenglong/archive/2016/07/24/5700997.html

css3动画效果小结(推荐)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3 3D立方体效果示例－transform也不过如此
Dec 05 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
HTML5中5个简单实用的API（第二篇，含全屏、可见性、拍照、预加载、电池状态）
May 07 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 #HTML / CSS
浅谈css3中的前缀
Jul 20 #HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 #HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 #HTML / CSS
CSS3实现时间轴效果
Jul 11 #HTML / CSS
CSS3实现10种Loading效果
Jul 11 #HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 #HTML / CSS
SRF-M100(1) GF515(1) RP2100(1) 低放电路(1) 德劲1102(1) SHARP(1) 安健(1) 乐信(1) ICF-SW7600(1) PL550(1)
You might like
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
PHP 字符串编码截取函数（兼容utf-8和gb2312）
2009/05/02 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
微信小程序五子棋游戏的棋盘，重置，对弈实现方法【附demo源码下载】
2019/02/20 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
原生JS实现留言板
2020/03/26 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
解决python报错MemoryError的问题
2018/06/26 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
HTML5+CSS3网页加载进度条的实现，下载进度条的代码实例
2016/12/30 HTML / CSS
匈牙利墨盒和碳粉购买网站：CDRmarket
2018/04/14 全球购物
探亲假请假条
2014/04/11 职场文书
医院信息公开实施方案
2014/05/09 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
图书馆义工感想
2015/08/07 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis