CSS3--Transition,Transform和Animation

最新推荐文章于 2022-07-18 23:54:11 发布

zcy_csdn123

最新推荐文章于 2022-07-18 23:54:11 发布

阅读量440

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/zcy_csdn123/article/details/77894901

版权

css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

因为说的是动态效果，所以并没有截图，如果想看效果复制代码后即可以看到。不过还是建议大家手动操作。

一、Transition(过渡)
属性：
transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指对backgound的变化进行过渡。
transition-duration：用于指定这个过渡的时间。（多久将效果过渡完成）
transition-timing-function:用于指定过渡的类型（以一种什么性质变化，如渐变等）
transition-delay：指定延迟过渡的时间（多久后开始过渡，默认0立马开始）
他们是可以都写在transition下面的如：transition：background-color 0.5s linear 5s;

具体看个例子

.transStart{
    background-color:#eee;
    transition:background-color 5s linear;
}
.transEnd{
    background-color:yellow;
    transition:background-color 5s linear;
}

<div class="transStart">transition</div>
<button type="button" onclick="myclick()">click</button>
<script>
    var tranDiv = document.getElementsByClassName('transStart')[0];
    var btn = document.getElementsByTagName('button')[0];
    console.log(tranDiv);
    function myclick(){
        //tranDiv.style.backgroundColor = 'yellow';
     tranDiv.className = 'transEnd';
    }
</script>

当我点击按钮的时候，背景颜色会由#eee 变成黄色，而并非一蹴而就，是一点点变化（linear的效果是像透明度有0-100这样显示黄色）。
两种方式改变了背景颜色，第一种直接操作CSS，第二种修改className 都是可以触发的，但注意：更改className时一定要将transitions带上否则没有过渡效果

看一下transition-timing-function的各种效果（w3c）
这里写图片描述

二、Transform(转换)
transform 其实就是拉伸、压缩、旋转、偏移等一些图形的基本变换。
主要分量大类：2D转换和3D转换
2D转换

translate(x,y):沿着X和Y轴移动元素

transform:transalte(50px,100px)

将元素从左移动50px,从顶端移动100px

当然它有一些变体
translateX(n):沿着X轴移动
translateY(n):沿着Y轴移动

scale(x,y):改变元素的宽和高（填数字，变化为倍数：宽放大几倍，高放大几倍）

transform:scale(2,2)

width变为原来的2倍，height变为原来的两倍。

scaleX(n)
scaleY(n)

rotate(angel): 顺时针旋转给定的角度，负值为逆时针方向。

transform:rotate(30deg)

顺时针旋转30度

skew(x-angle,y-angle) 元素按X轴翻和Y轴翻转给定的角度。

transform:skew(30deg,-20deg)

沿X轴翻转30度，沿Y轴反方向（因为负值）翻转20度。
skewX(angle)
skewY(angle)

matrix(n,n,n,n,n,n)是对上面几种变换的集合，是以数学矩阵的形式定义距离角度等的。
相对来说微微有点复杂，不过看懂之后就会好很多。
具体请看http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

3D转换
基本上就是以上的东西变成了3D效果，如果你给2D图加3D效果，很多效果就会跟2D的一样。
translate3d(x,y,z)
scaleed(x,y,z）
rotate3d(x,y,z,angle)
perspective(n)

下面是我写的例子，可以每个都尝试一下看看效果

<head>
    <meta charset="UTF-8">
    <title>transform</title>
    <style>
        .div1{
            margin:100px 0 0 100px;
            width:200px;height:100px;background:#ddd;text-align: center;
        }
        .translate{
            transform: translate(50px,50px);
        }
        .scale{
            transform: scale(2,2);
        }
        .rotate{
            transform:rotate(30deg);
        }
        .skew{
            transform:skew(30deg,-20deg)
        }
        .translate3d{
            transform: translate3d(50px,50px,50px);
        }
        .scale3d{
            transform: scale3d(2,2,2);
        }
        .rotate3d{
            transform:rotate3d(1,1,1,30deg);
        }
    </style>
</head>
<body>
    <button onclick="myClick()">变换</button>
    <div class="div1">transform</div>
    <script>
        var btn = document.getElementsByTagName('button')[0];
        var myDiv = document.getElementsByClassName('div1')[0];
        console.log(btn);
        function myClick(){
            //myDiv.className += " translate"
            //myDiv.className += " scale"
            myDiv.className += " rotate"
            //myDiv.className += " skew"
            //myDiv.className += " translate3d"
            //myDiv.className += " scale3d"
            //myDiv.className += " rotate3d"
        }
    </script>
</body>

想看那个效果就把JS的注释去掉就可以。

并且将transform和transition结合使用就会产生类似旋转，缩放这样的效果。

Animation（卡通、动画）
先看一个栗子：

<style>
    div{
        width:100px;height:100px;background:red;margin:100px 0 0 100px;  position: relative;
    }
    .classMove{
        -webkit-animation-name: move;
        -webkit-animation-duration:3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-delay:1s;
        -webkit-animation-iteration-count: 2;
        -webkit-animation-direction: normal;
    }
    @keyFrames move{
        0%{
            left:0px
        }
        100%{
            left:200px;
        }
    }
</style>
</head>
<body>
    <div class="classMove"></div>
</body>

属性：
animation-name: 规定需要绑定到选择器的keyframe名称，上栗中的@keyframe
animation-duration:完成动画所需要的时间（秒或者毫秒）
animation-timing-function:动画的速度曲线
linear:从头到尾都是速度相同
ease：默认开始慢后来快
ease-in动画以低速开始
ease-out：以低速结束
ease-in-out：以低速开始和结束
animation-delay:动画在开始之前延迟多久，默认0
animation-iteration-count:动画播放的次数（n）或者infinite（无限次）
animation-iteration-direction:是否轮流反向播放动画（normal：正常， alternate：轮流反向播放）

另外在keyframe种我们也可以使用下面这种方式

@keyframes move
{
from {left:0px;}
to {left:200px;}
}

不过百分比的方式可以让我们又更多的变化，具体看是应用。
并且以上属性都可以合写

-webkit-animation:move 5s infinite;

最后注意一下浏览器的支持情况，为了保险起见，属性还是加上浏览器前缀比较保险。
我用的chrome transition和transform不用浏览器前缀就可以实现，但Animation需要。

zcy_csdn123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3--Transition,Transform和Animation

因为说的是动态效果，所以并没有截图，如果想看效果复制代码后即可以看到。不过还是建议大家手动操作。一、Transition(过渡) 属性： transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指对backgound的变化进行过渡。 transition-duration：用于指定这个过渡的时间。（多久将效果过渡完成）
复制链接

扫一扫