自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <style>

        div{

            width: 200px;

            height: 100px;

            background: pink;

            border: 1px solid #ccc;

            margin-bottom: 10px;

        }

        .box1{

            transform: translate(20px, 15px);

            -webkit-transform: translate(20px, 15px);

            -moz-transform: translate(20px, 15px);

            -ms-transform: translate(20px, 15px);

            -o-transform: translate(20px, 15px);

        }

        .box2{

            transform: translate3d(5px, 10px, 500px);

            -webkit-transform: translate3d(5px, 10px, 500px);

            -moz-transform: translate3d(5px, 10px, 500px);

            -ms-transform: translate3d(5px, 10px, 500px);

            -o-transform: translate3d(5px, 10px, 500px);

        }

        .box3{

            transform: translateX(30px);

            -webkit-transform: translateX(30px);

            -moz-transform: translateX(30px);

            -ms-transform: translateX(30px);

            -o-transform: translateX(30px);

        }

        .box4{

            transform: scale(2.0, 2.0);

            -webkit-transform: scale(2.0, 2.0);

            -moz-transform: scale(2.0, 2.0);

            -ms-transform: scale(2.0, 2.0);

            -o-transform: scale(2.0, 2.0);

        }

        .box5{

            transform: scale3d(1, 1, 2.0);

            -webkit-transform: scale3d(1, 1, 2.0);

            -moz-transform: scale3d(1, 1, 2.0);

            -ms-transform: scale3d(1, 1, 2.0);

            -o-transform: scale3d(1,1, 2.0);

        }

        .box6{

            transform: scaleZ(2);

            -webkit-transform: scaleZ(2);

            -moz-transform: scaleZ(2);

            -ms-transform: scaleZ(2);

            -o-transform: scaleZ(2);

        }

        .box7{

            transform: rotate(30deg);

            -webkit-transform: rotate(30deg);

            -moz-transform: rotate(30deg);

            -ms-transform: rotate(30deg);

            -o-transform: rotate(30deg);

        }

        .box8{

            transform: rotate3d(1, 1, -1, 30deg);

            -webkit-transform: rotate3d(1, 1, -1, 30deg);

            -moz-transform: rotate3d(1, 1, -1, 30deg);

            -ms-transform: rotate3d(1, 1, -1, 30deg);

            -o-transform: rotate3d(1, 1, -1, 30deg);

        }

        .box9{

            transform: rotateX(80deg);

            -webkit-transform: rotateX(80deg);

            -moz-transform: rotateX(80deg);

            -ms-transform: rotateX(80deg);

            -o-transform: rotateX(80deg);

        }

        .box10{

            transform: skew(30deg, 30deg);

            -webkit-transform: skew(30deg, 30deg);

            -moz-transform: skew(30deg, 30deg);

            -ms-transform: skew(30deg, 30deg);

            -o-transform: skew(30deg, 30deg);

        }

        .box11{

            transform: skewX(45deg);

            -webkit-transform: skewX(45deg);

            -moz-transform: skewX(45deg);

            -ms-transform: skewX(45deg);

            -o-transform: skewX(45deg);

        }

        .box12{

            position: relative;

            padding: 20px;

            perspective: 150;

            -webkit-perspective: 150;

        }

        .box12>div{

            width: 160px;

            height: 60px;

            border: 1px solid #ddd;

            background: #09f;

            transform: rotateX(45deg);

            -webkit-transform: rotateX(45deg);

            -moz-transform: rotateX(45deg);

            -ms-transform: rotateX(45deg);

            -o-transform: rotateX(45deg);

        }

        .box13{

            background: #09f;

            width: 200px;

            transition: width 2s,background 2s;

            -webkit-transition: width 2s,background 2s;

            -moz-transition: width 2s,background 2s;

            -ms-transition: width 2s,background 2s;

            -o-transition: width 2s,background 2s;

        }

        .box13:hover{

            width: 400px;

            background: blue;

        }

        .box14{

            position: relative;

            animation: move 5s linear infinite alternate;;

            -webkit-animation: move 5s linear infinite alternate;;

            -moz-animation: move 5s linear infinite alternate;;

            -ms-animation: move 5s linear infinite alternate;;

            -o-animation: move 5s linear infinite alternate;

        }

        /* animation-play-state: paused|running;设置对象动画的状态，下例hover运动暂停 */

        .box14:hover{

            animation-play-state: paused;

            -webkit-animation-play-state: paused;

            -moz-animation-play-state: paused;

        }

        @keyframes move {

            from{left: 0px;}

            to{left: 500px;}

        }

        @-webkit-keyframes move{

            0%{left: 0px;}

            100%{left: 500px;}

        }

        .box15 span{

            display: block;

            font-weight: bolder;

            font-size: 20px;

        }

        .a1{

            transform: translate(60px);

            -webkit-transform: translate(60px);

            -moz-transform: translate(60px);

            animation: move1 2s ease-out forwards;

            -webkit-animation: move1 2s ease-out forwards;

            -moz-animation: move1 2s ease-out forwards;

        }

        @keyframes move1{

            0%{transform: translate(0px);opacity: 0;}

            40%{transform: translate(20px);opacity: 0.4;}

            70%{transform: translate(40px);opacity: 1.0;}

            100%{transform: translate(60px);opacity: 0;}

        }

        @-webkit-keyframes move1{

            0%{-webkit-transform: translate(0px);opacity: 0;}

            40%{-webkit-transform: translate(20px);opacity: 0.4;}

            70%{-webkit-transform: translate(40px);opacity: 1.0;}

            100%{-webkit-transform: translate(60px);opacity: 0;}

        }

        @-moz-keyframes move1{

            0%{-moz-transform: translate(0px);opacity: 0;}

            40%{-moz-transform: translate(20px);opacity: 0.4;}

            70%{-moz-transform: translate(40px);opacity: 1.0;}

            100%{-moz-transform: translate(60px);opacity: 0;}

        }

        .a3{

            opacity: 0;

            transform: translate(20px);

            -webkit-transform: translate(20px);

            -moz-transform: translate(20px);

            animation: move3 2s ease-in 2s forwards;

            -webkit-animation: move3 2s ease-in 2s forwards;

            -moz-animation: move3 2s ease-in 2s forwards;

        }

        @keyframes move3{

            0%{transform: translate(120px);opacity: 0;}

            40%{transform: translate(80px);opacity: 0.4;}

            70%{transform: translate(40px);opacity: 1.0;}

            100%{transform: translate(20px);opacity: 0;}

        }

        @-webkit-keyframes move3{

            0%{-webkit-transform: translate(120px);opacity: 0;}

            40%{-webkit-transform: translate(80px);opacity: 0.4;}

            70%{-webkit-transform: translate(40px);opacity: 1.0;}

            100%{-webkit-transform: translate(20px);opacity: 0;}

        }

        @-moz-keyframes move3{

            0%{-moz-transform: translate(120px);opacity: 0;}

            40%{-moz-transform: translate(80px);opacity: 0.4;}

            70%{-moz-transform: translate(40px);opacity: 1.0;}

            100%{-moz-transform: translate(20px);opacity: 0;}

        }

        .a2{

            opacity: 0;

            font-size: 36px;

            text-align: center;

            animation: move2 2s ease-in 4s forwards;

            -webkit-animation: move2 2s ease-in 4s forwards;

            -moz-animation: move2 2s ease-in 4s forwards;

        }

        @keyframes move2{

            0%{opacity: 0;}

            20%{opacity: 0.6;}

            40%{opacity: 0.8;}

            60%{opacity: 0.4;}

            80%{opacity: 0.8;}

            100%{opacity: 1.0;}

        }

        @-webkit-keyframes move2{

            0%{opacity: 0;}

            20%{opacity: 0.6;}

            40%{opacity: 0.8;}

            60%{opacity: 0.4;}

            80%{opacity: 0.8;}

            100%{opacity: 1.0;}

        }

        @-moz-keyframes move2{

            0%{opacity: 0;}

            20%{opacity: 0.6;}

            40%{opacity: 0.8;}

            60%{opacity: 0.4;}

            80%{opacity: 0.8;}

            100%{opacity: 1.0;}

        }

    </style>

</head>

<body>

    <!-- transform属性向元素应用2D或3D转换，我们可以旋转、缩放、移动、倾斜元素，语法：transform: none|transform-functions; -->

    <!-- translate(x,y)--定义2D位移 -->

    <div class="box1">translate(x,y)</div>

    <!-- translate(x,y,z)--定义3D位移 -->

    <div class="box2">translate(x,y,z)</div>

    <!-- translateX(x)--定义只按X轴位移 (同理按Y轴，3D的Z轴)-->

    <div class="box3">translateX(x)</div>

    <!-- scale(x,y)--定义2D缩放转换 -->

    <div class="box4">scale(x,y)</div>

    <!-- scale3d(x,y,z)--定义3D缩放转换 -->

    <div class="box5">scale3d(x,y,z)</div>

    <!-- scaleZ(z)--定义只按Z轴缩放（同理按Y轴，X轴） -->

    <div class="box6">scaleZ(z)</div>

    <!-- rotate(angle)--定义2D旋转 -->

    <div class="box7">rotate(angle)</div>

    <!-- rotate3d(angle)--定义3D旋转 x,y,z的值组成在3d空间的矢量坐标，对象将会围绕这个坐标轴旋转-->

    <div class="box8">rotate3d(x,y,z,angle)</div>

    <!-- rotateX(angle) 定义沿X轴的3d旋转(同理设置Y轴Z轴的3d旋转)-->

    <div class="box9">rotateX(angle)</div>

    <!-- skew(x-angle,y-angle) 定义沿X轴和Y轴的倾斜转换-->

    <div class="box10">skew(x-angle,y-angle)</div>

    <!-- skewX(xangle) 定义沿X轴的2d倾斜转换(同理设置Y轴的2d倾斜转换)-->

    <div class="box11">skewX(angle)</div>

    <!-- perspective(n)为3D转换元素定义透视视图(当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身) -->

    <div class="box12">

        <div>perspective(n)</div>

    </div>

    <!-- transition属性对元素设置对象变换时的过渡,用于设置4个过渡属性：

    transition-property--参与过渡的属性、

    transition-duration--对象过渡的持续时间、

    transition-timing-function--对象中过渡的动画类型、

    transition-delay--对象延迟过渡的时间 -->

    <!-- 如果只提供一个<time>参数，则为 <' transition-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' transition-duration '> 的值定义，第二个为 <' transition-delay '> 的值定义 -->

    <div class="box13">transition过渡效果</div>

    <!-- animation 设置对象元素的动画特效，用于设置6个动画属性（默认值none 0 ease 0 1 normal）：

    animation-name--需要绑定到选择器上的动画名称、

    animation-duration--完成动画所花费的时间、

    animation-timing-function--规定动画的速度曲线、

    animation-delay--规定在动画开始前的延迟、

    animation-iteration-count--规定动画播放的次数、

    animation-direction--规定动画是否轮流反向播放

    ( forwards--当动画完成后，保持最后一个属性值 )-->

    <div class="box14">animation动画特效</div>

    <div class="box15">

        <span class="a1">css3 animation</span>

        <span class="a2">css3 animation</span>

        <span class="a3">css3 animation</span>

    </div>

</body>

</html>

自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法的更多相关文章

关于CSS3中transform变换的小坑
2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...
第98天：CSS3中transform变换详解
transform变换详解本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
css 动画（二） transition 过渡 & animation 动画
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...
CSS3中动画属性transform、transition和animation
Transform:变形在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
css3实践之图片轮播（Transform，Transition和Animation）
楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...
CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
CSS3中和动画有关的属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform. transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为 ...
好吧，CSS3 3D transform变换，不过如此！
一.写在前面的秋裤早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

随机推荐

「NOI2017」蔬菜解题报告
「NOI2017」蔬菜首先考虑流可以从 \(s\) 流入表示得到蔬菜,流出到 \(t\) 表示卖出蔬菜,给每个蔬菜拆点,并给它它每天应得的蔬菜. 但是我们没办法直接给,注意到如果把变质看成得到并可 ...
CodeForces - 849B 几何
题意:给n个点,问是否能两条平行线覆盖所有的点思路:因为要求全部覆盖,所以我们第一个点肯定是会入其中一条直线,其实只用判前三个点的所有情况即可 #include<stdio.h> #in ...
[codeforces 508E]Maximum Matching
题目:Maximum Matching 传送门:http://codeforces.com/contest/1038/problem/E 分析: 一个块拥有{color1,val,color2},两个 ...
执行hbase zkcli命令报错
执行hbase zkcli后报错信息如下: 15/10/02 15:17:55 INFO zookeeper.ZooKeeper: Client environment:java.library.pa ...
vs2005安装和 Fatal Error C1902
win10系统不能激活 win7可以激活,运行会出现兼容错误,解决办法装2个sp1补丁拷贝mspdb80.dll到系统目录后会出现 Fatal Error C1902, 解决方法如下: VC++20 ...
20141211--C# 构造函数
namespace fengzhuang { class Class2 { private string _Name; private string _Code; public string _Sex ...
用 Flask 来写个轻博客 (22) — 实现博客文章的添加和编辑页面
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表新建表单新建视图函数新建模板在博客文章页面添加 New 和 Ed ...
JetBrains.dotPeek
Free .NET Decompiler and Assembly Browser Decompile .NET assemblies to C# dotPeek is a free-of-charg ...
stl源码为什么要大量使用typedef?
SGI源码download,<stl源码剖析>里展示了vector的部分源码: template <class T, class Alloc = alloc> class ve ...
UVA12589_Learning Vector
大致题意: 有n个向量要你选k个,把这k个向量连起来,画出来的与x轴围成的面积最大思路: 这个是斜率dp,让斜率大的排在前面,记忆化搜索的时候要加入一个当前高的信息,因为这个向量形成面积不仅和斜率有 ...

自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法

自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法的更多相关文章

随机推荐

热门专题