transform、translate、translaton以及动画animation

最新推荐文章于 2024-06-17 23:49:16 发布

麦兜的鱼丸呐

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量404

点赞数

分类专栏： css 文章标签： transform translate animate 前端

本文链接：https://blog.csdn.net/Wenli258/article/details/92795148

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

transform、translate、translaton以及动画animation

translate和transform

translate和transform

最近项目不忙的时候和朋友闲聊，竟然发现自己对translate和transform的记忆竟然是那么模糊，因为平常用的比较少，所以比较容易记混，在此记录下来两者的关系，以免以后又像今天一样被打脸啦~~

tranform

在css3中transform主要包括以下几种： 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
旋转：rotate() 顺时针旋转给定的角度，允许负值rotate(30deg)
扭曲：skew()元素翻转给定的角度，根据给定的水平线(x轴)和垂直线（Y轴）参数：skew(30deg,20deg)
缩放：scale()放大或缩小，根据给定的宽度（X轴）和高度（Y轴）参数：scale(2,4)
移动：translate()平移，传进x,y值，代表沿x轴和y轴平移的距离：translate（30px,50px）

无论是旋转还是拉伸什么的，本质上都是应用的matrix()方法实现的（修改matrix()方法固定几个值），只是类似于transform:rotate这种表现形式，我们更容易理解，记忆与上手.
所有的2D转换方法组合在一起： matrix()旋转、缩放移动以及倾斜元素。
matrix(scale.x,scale.y,translate.x,translate.y)

transform: rotate旋转|scale缩放|skew扭曲|translate移动|matrix矩阵变形；
综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;//需要有空格隔开

transform与坐标

transform旋转是围绕一个中心点旋转，而这个中心点就是transform-origin属性对应的点，也是所有矩阵计算的一个重要依据点。
改变起点位置 transform-origin: bottom left;

translate

translate是transform的一个方法，translate代表移动，通过translate方法，使得元素从当前位置移动，根据给定的X（left）和Y（top）坐标。
用法：

//translate
transform:translate(50px, 100px);

//元素居中
position:absolute;
top:50%;
left:50%;
width:50px;
height:50px;
transform:translate(-50%,-50%);
background:gray;

transition

transition允许css属性值在一定时间内平滑过，transition是指定了某一个属性（如width）在两个值之间如何过渡。

transition主要包含四个属性值：

执行变换的属性：transition-property;
变换延续的时间：transition-duration;
在延续时间段，变换的速率变化：transition-timing-function //例：平缓进入、先快后慢；

值:ease(逐渐慢下来)，linear(匀速)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(先慢到快再到慢)，cubic-bezier(该值允许你去自定义一个时间曲线)。

变换延迟时间： transition-delay

需要事件的触发，例如单击、获取焦点、失去焦点等。
语法：transition: property duration timing-function delay;
例如：transition: width 2s ease 0s;

animation

animation也是通过指定某一个属性（如width）在两个值之间如何过渡来实现动画。

//定义动画
@keyframes move {
        from{}
        to{}
}
@keyframes move {
        0%{}
        100%{}
}

调用动画
animation: 动画名称动画时间动画速度动画延迟动画次数动画方向动画播放状态动画完成时的状态

动画名称: animation-name
动画时间 animation-duration
动画速度 animation-timing-function: linear（匀速变化） ease（低俗开始，然后加快，快结束的时候再放慢） ease-in（低速开始） ease-out（低速结束） ease-in-out（低俗开始，低速结束） steps()
动画延迟 animation-delay
动画次数 animation-iteration-count: infinite
动画方向 animation-direction:
动画播放状态: animation-play-state: running pause
动画完成时的状态: animation-fill-mode:forwards backwards

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .box {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
            animation: move 5s linear infinite;
       }
       @keyframes move {
           0%{
               left: 100px;
           }
           50%{
               left: 150px;
           }
           100%{
               left: 200px;
           }
       }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

与transition不同的是：

animation可以通过keyframe显示控制当前帧的属性值，而transition只能隐式来进行（不能指定每帧的属性值），所以相对而言animation的功能更加灵活。
animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而transiton确实改变了元素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别。

麦兜的鱼丸呐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transform、translate、translaton以及动画animation

transform、translate、translaton以及动画animationtranslate和transformtranformtransform与坐标translatetransitionanimationtranslate和transform最近项目不忙的时候和朋友闲聊，竟然发现自己对translate和transform的记忆竟然是那么模糊，因为平常用的比较少，所以比较容易记...
复制链接

扫一扫