CSS3的过渡、动画、转换

CSS动画与转换技术详解

最新推荐文章于 2024-04-25 16:16:15 发布

原创最新推荐文章于 2024-04-25 16:16:15 发布 · 928 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#htm5 #前端 #网页设计 #css3

CSS 专栏收录该内容

25 篇文章

订阅专栏

本文深入探讨了CSS中的过渡（transition）、动画（animation）和转换（transform）属性的使用方法，包括它们的区别、语法、关键帧应用以及如何在不同浏览器中适配前缀。通过实例展示了如何创建平滑的过渡效果、动画效果以及3D空间内的元素变换，旨在提升网页交互体验。

特别说明：以下属性目前都需要加上各浏览器厂商前缀,

浏览器厂商前缀浏览器内核

Chrome、Safari -webkit- Blink、Webkit

Opera -o- Blink

Firefox -moz- Gecko

IE -ms- Trident

1)过渡

transition-property——指定应用过渡的属性；

transition-duration——指定过渡的持续时间；

transition-timing-function——指定过渡期间计算中间值得方式(ease、linear、ease-in、ease-out、ease-in-out)；

transition-delay——指定过渡开始之前的延迟时间；

transition——在一条声明中指定所有过渡细节的简写属性(按以上顺序，部分可选)；

2)动画

animation-name——指定动画名称；

animation-duration——设置动画播放的持续时间；

animation-timing-function——指定如何计算中间动画值(ease、linear、ease-in、ease-out、ease-in-out)；

animation-delay——设置动画开始前的延迟时间；

animation-iteration-count——设置动画的播放次数（infinite、数值）；

animation——简写属性（按以上顺序，部分可选）；

animation-direction——设置动画循环播放的时候是否反向播放（normal、alternate）;

animation-play-state——允许动画暂停和重新播放（running、paused）;

3)转换

transform：translate(<长度值或百分数值>)——在x,y轴两个方向上平移元素；

transform：translate3d(x,y,z)——在x,y，z轴两个方向上平移元素(3D转换)；

transform：translateX(<长度值或百分数值>)——在x轴方向上平移元素；

transform：translateY(<长度值或百分数值>)——在y轴方向上平移元素；

transform：translateZ(<长度值或百分数值>)——在z轴方向上平移元素(3D转换);

transform：scale(<数值>)——在x,y轴两个方向上缩放元素；

transform：scale3d(x,y,z)——在x,y,z轴三个方向上缩放元素(3D转换)；

transform：scaleX(<数值>)——在x轴方向上缩放元素；

transform：scaleY(<数值>)——在y轴方向上缩放元素；

transform：scaleZ(<数值>)——在z轴方向上缩放元素(3D转换)；

transform：rotate(<角度>)——旋转元素；

transform：rotate3d(x,y,z,angle)——旋转元素(3D转换)；

transform：skew(<角度>)——在x,y轴两个方向上使元素倾斜一定的角度；

transform：skewX(<角度>)——在x轴方向上使元素倾斜一定的角度；

transform：skewY(<角度>)——在y轴方向上使元素倾斜一定的角度；

transform:matrix(4~6个数值)——指定自定义转换，使用六个值的矩阵；

transform:matrix3d(12~16个值)——指定自定义转换，使用 16 个值的 4x4 矩阵(3D转换)；

transform-origin——指定转换的起点（%/长度值/left/center/right,%/长度值/top/center/bottom）;

transform-style——规定被嵌套元素如何在 3D 空间中显示(3D转换);

perspective(n)——定义 3D 转换元素的透视视图(3D转换);

perspective-origin——规定 3D 元素的底部位置(3D转换)；

backface-visibility——定义元素在不面对屏幕时是否可见(3D转换);

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <style type="text/css">

        p{
            padding: 5px;
            border: medium double black;
            background-color: lightgray;
            font-family: sans-serif;
        }
        /*过渡，示例只写Firefox
        #yd{
            font-size: large;
            border: medium solid black;
            cursor: pointer;
            -moz-transition-delay: 10ms;
            -moz-transition-duration: 250ms;
        }
        #yd:hover{
            font-size: x-large;
            border: medium solid white;
            background-color: green;
            color: white;
            padding: 4px;
            -moz-transition-delay: 100ms;
            -moz-transition-property: background-color,color,padding,font-size,border;
            -moz-transition-duration: 500ms;
            -moz-transition-timing-function: linear;
        }
        */
        /*
        #yd{
            font-size: large;
            border: medium solid black;
            cursor: pointer;
        }
        */
        /*动画，目前只支持chrome、safari
        #yd:hover{
            -webkit-animation-delay: 100ms;
            -webkit-animation-duration: 500ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name: 'bigger';
        }
        @-webkit-keyframes bigger {
            to{
                font-size: x-large;
                border: medium solid white;
                background-color: green;
                color: white;
                padding: 4px;
            }
        }
        */
        /*动画，设置初始状态
        #yd:hover{
            -webkit-animation-delay: 100ms;
            -webkit-animation-duration: 500ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name: 'bigger';
        }
        @-webkit-keyframes bigger {
            from{
                font-size: xx-small;
                background-color: red;
            }
            to{
                font-size: x-large;
                border: medium solid white;
                background-color: green;
                color: white;
                padding: 4px;
            }
        }
        */
        /*动画，设置中间关键帧、设置重复方向
        #yd:hover{
            -webkit-animation-delay: 100ms;
            -webkit-animation-duration: 2500ms;
            -webkit-animation-iteration-count: 2;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name: 'bigger';
            -webkit-animation-direction: alternate;
        }
        @-webkit-keyframes bigger {
            from{
                font-size: xx-small;
                background-color: red;
            }
            50%{
                background-color: yellow;
                padding: 1px;
            }
            75%{
                color: white;
                padding: 2px;
            }
            to{
                font-size: x-large;
                border: medium solid white;
                background-color: green;
                padding: 4px;
            }
        }
        */
        /*初始布局时应用动画
        #yd{
            font-size: large;
            border: medium solid black;
            -webkit-animation-duration: 2500ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name: 'bigger';
        }
        @-webkit-keyframes bigger{
            to{
                border:medium solid white;
                background-color: green;
            }
        }
        */
        /*动画，重用关键帧
        span{
            font-size: large;
            border: medium solid black;
        }
        #yd{
            -webkit-animation-duration: 2500ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name: 'bigger';
        }
        #lc{
            -webkit-animation-duration: 500ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: normal;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: 'bigger';
        }
        @-webkit-keyframes bigger {
            to{
                border: medium solid white;
                background-color: green;
            }
        }
        */
        /*动画，为多个元素应用多个动画
        span{
            font-size: large;
            border: medium solid black;
        }
        #yd,#lc{
            -webkit-animation-duration: 2500ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name: 'bigger','plus';
        }
        @-webkit-keyframes bigger {
            to{
                border: medium solid white;
                background-color: green;
            }
        }
        @-webkit-keyframes plus {
            to{
                font-size: x-large;
                padding: 4px;
            }
        }
        */
        /*停止和启用动画
        #yd{
            -webkit-animation-duration: 2500ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name: 'bigger';
        }
        @-webkit-keyframes bigger {
            from{
                font-size: large;
                border: medium solid black;
            }
            to{
                font-size: x-large;
                border: medium solid white;
                background-color: green;
                color: white;
                padding: 4px;
            }
        }
        */
        #yd{
            font-size:x-large;
            border: medium solid white;
            background-color: green;
            color: white;
            padding: 4px;
            display: inline-block;
            -moz-transform:rotate(-90deg) scaleX(1.2);
            -moz-transform-origin: right top;
        }
        #yd:hover{
            cursor: pointer;
           -moz-transition-duration: 1.5s;
            -moz-transform: rotate(360deg);
        }
    </style>
</head>
<body>
<p>
    远地本着“构筑诚信，永续发展”的理念为客户提供专业的<span id="lc">理财</span>服务、财富管理以及产品方案推荐。
    <span id="yd">远地都进来看看撒</span>将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
    帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>
<div>
    <button>Running</button>
    <button>Paused</button>
</div>
<!--停止和启用动画
<script>
    var buttons=document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        buttons[i].onclick=function(e){
            document.getElementById("yd").style.webkitAnimationPlayState= e.target.innerHTML;
        }
    }
</script>
-->
</body>
</html>

补充说明：一句话概括Transform,Transition,Animation区别

Transform：对元素进行变形；

Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。

Animation：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。可以设置多个关键贞。

transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。