本文主要包含css3,动画等相关知识,佚名 希望在学习及工作中可以帮助到您
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过渡效果
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>transition过渡效果</title>
- <style>
- *{
- margin: 0px;
- padding: 0px;
- }
- #box{
- width: 200px;
- height: 200px;
- background-color: chocolate;
- position: relative;
- left: 0px;
- top: 0px;
- transition: top 5s ease,left 5s ease ;
- -moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */
- -webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */
- -o-transition: top 5s ease,left 5s ease ; /* Opera */
- }
- .btn{
- width: 512px;
- margin: 0 auto;
- border: 2px solid #e3e3e3;
- border-radius: 5px;
- padding: 10px;
- }
- .btn button{
- width: 80px;
- height: 40px;
- text-align: center;
- line-height: 40px;
- margin-right: 20px;
- }
- button:last-child{
- margin-right: 0px;
- }
- </style>
- <script>
- window.onload=function(){
- var e1 = document.getElementById("e1"); <