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稍有区别)

实例:

<!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");
            var e2 = document.getElementById("e2");
            var e3 = document.getElementById("e3");
            var e4 = document.getElementById("e4");
            var e5 = document.getElementById("e5");
            var box = document.getElementById("box");
            e1.onclick=function(){
                box.style.left = 1000+"px";
                box.style.top = 100+"px";
                box.style.transitionTimingFunction="ease";
            };
            e2.onclick=function(){
                box.style.right = 0+"px";
                box.style.top = 0+"px";
                box.style.transitionTimingFunction="liner";
            };
            e3.onclick=function(){
                box.style.right = 1000+"px";
                box.style.top = 100+"px";
                box.style.transitionTimingFunction="ease-in";
            };
            e4.onclick=function(){
                box.style.left = 0+"px";
                box.style.top = 0+"px";
                box.style.transitionTimingFunction="ease-out";
            };
            e5.onclick=function(){
                box.style.left = 1000+"px";
                box.style.top = 100+"px";
                box.style.transitionTimingFunction="ease-in-out";
            };

        }
    </script>
</head>
<body>
    <div id="box"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <div class="btn">
        <button id="e1">ease</button>
        <button id="e2">liner</button>
        <button id="e3">ease-in</button>
        <button id="e4">ease-out</button>
        <button id="e5">ease-in-out</button>
    </div>
</body>
</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% 动画的结束时间。

例如:

  animation:mymove 5s infinite;

  @keyframes mymove{

    from{ top:0px; }

    to{ top:200px; }

  }

还可以这么写:

  @keyframes mymove{

    0%{ top:0px; }

    25%{ top:200px; }

    50%{ top:100px; }

    75%{ top:200px; }

    100%{ top:0px; }

  }

案例:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>

<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

3、设置3D场景(即transform)

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

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

  

  使用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)

  

  transform:rotate(45deg)

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

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

    rotateZ:向屏幕外为正方向。

  一个div块,右边沿向屏幕内旋转45deg,即应设置为:Transform:rotateY(45deg)。

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform3D转换效果</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: chocolate;
            position: relative;
            left: 0px;
            top: 0px;
            perspective:800px;
            perspective-origin:50% 50%;
            transform-style: preserve-3d;
            transform-origin:0% 100%;//以Y轴为旋转中心
        }
        p{
            margin:20px 520px;
        }
        .btn{
            width: 300px;
            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 tx = document.getElementById("tx");
            var ty = document.getElementById("ty");
            var tz = document.getElementById("tz");
            var rx = document.getElementById("rx");
            var ry = document.getElementById("ry");
            var rz = document.getElementById("rz");
            var box = document.getElementById("box");
            tx.onclick=function(){
                box.style.transform = "translateX(500px)";
            };
            ty.onclick=function(){
                box.style.transform = "translateY(400px)"
            };
            rx.onclick=function(){
                box.style.transform = "rotateX(30deg)"
            };
            ry.onclick=function(){
                box.style.transform = "rotateY(30deg)"
            };
            rz.onclick=function(){
                box.style.transform = "rotateZ(30deg)"
            };
        }
    </script>
</head>
<body>
    <div id="box"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <p>translate(移动距离)</p>
    <div class="btn">
        <button id="tx">translateX</button>
        <button id="ty">translateY</button>
    </div>
    <p>rotate(旋转角度)</p>
    <div class="btn">
        <button id="rx">rotateX</button>
        <button id="ry">rotateY</button>
        <button id="rz">rotateZ</button>
    </div>
</body>
</html>

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

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

    X轴:left、center、right.

    Y轴:top、center、bottom.

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

时间: 07-22

css3动画效果小结的相关文章

CSS3 动画效果带来的bug

css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是当我们使用上面的transition属性后,A点移动到B点是2秒内完成的,当执行JS代码时候,DIV还没到应该的位置,那么,在Div.style.left=B; console.log(Div.offsetLeft); 这样console出来的是起点坐标而不是终点坐标. 即使你让其JS线程主动挂起使

css3 动画效果

css3 动画效果  做css3的动画效果,w3c的文档的文档已有事例.动画事例,也是看了半天才搞出来. 下面我就是结合个人理解进行介绍.最后个人做的一个动画demo css3的动画事例主要需要理解animation:可以算是动画的声明部分.你可以把动画属性的内容全部写到后边,动画的属性主要有:animation-name animation-duration还有一些动画延时,动画播放次数.这些要根据动画效果进行添加. 格式有:animation:animation-name animation

第八十三节,CSS3动画效果

CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一.动画简介     CSS3提供了类 Flash关键帧控制的动画效果,通过animation属性实现.     animation实现动画效果主要由两个部分组成:     1.通过类 Flash动画中的关键帧声明一个动画:     2.在animation属性中调用关键帧声明的动画.     CSS3提供的animation是一

Bounce.js – 快速创建漂亮的 CSS3 动画效果

Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代码. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实现3D图片滑块效果[附源码下载] 时尚设计!三种奇特网格加载效果[附源码下载] 源码下载      在线演示 本文

35个让人惊讶的 CSS3 动画效果演示

35个让人惊讶的 CSS3 动画效果演示 本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分(基础教程qkxue.net),随着越来越多的浏览器对 CSS3 支持的不断完善(腾云科技ty300.com),设计师和开发者们有了更多的选择.如今,用纯 CSS 就可以实现各种各样很酷的效果,甚至是动画. 1. Pure CSS Coke Can 2. Colorful Clock 3. jQ

鼠标悬停css3动画效果

下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标悬停css3动画效果</title> <link href="css/lanrenzhijia.css" rel="stylesheet" type="text/

css3 动画效果与公司框架简易动画的差异

先看一下该网站的效果 http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/ 该站里面的动画效果由简易动画与css3动画2种方式混合达到的. 一.特点与差异. 1.简易动画直接通过对dom元素追加class类名与属性参数 像这样 <img src="images/page02/text01.png"  class="text01 cmn-animate" cfg="{action:[{s

CSS自学笔记(14):CSS3动画效果

在CSS3中也新增了一些能够对元素创建动画处理的属性.通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片.flash动画和JavaScript了. CSS3中新增的动画效果的属性以及主流浏览器支持情况 属性 浏览器支持 transition IE Firefox Chrome Safari(-webkit-) Opera @keyframes IE Firefox Chrome(-webkit-) Safari(-webkit-)

animate.css 一些常用的CSS3动画效果

大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:http://daneden.me/animate/ 自定义下载样式:http://daneden.me/animate/build/ git地址:https://github.com/daneden/animate.css