CSS3-2D动画1-transition-transform的详细使用

CSS3动画可以让我们通过使用纯样式就能实现各种酷炫的效果
可以让我们做出类似于PPT的效果

CSS3动画概述

JS运动:

缺点,用定时器实现,写起来比较麻烦

CSS3动画可以让我们通过使用纯样式就能实现各种酷炫的效果,比上面还要简单好用。

可以让我们做出类似于PPT的效果。

一、CSS的运动

就是让一个盒子改变它的状态或位置

改变位置:用盒模型、偏移属性、浮动

改变状态:鼠标摸上去,添加class

但是这样的运动没有任何过渡,太突兀了,可以添加过渡样式实现过渡效果,让运动如丝滑般顺滑

二、过渡 transition

该属性可以让元素实现过渡效果,让状态或位置的改变不是瞬间完成而是按照一定的方式和过程完成。

transition:style duration delay timing-function;
//参数说明
transition:要过渡的样式 持续时间 是否延迟进行 运动形式;
样式:一般写能让元素改变状态或改变位置的。
//写法
最少可以写一个:时间
最多写4个,按照顺序来写
//样式中可以指定某一个样式属性,比如width,也可以指定所有的样式,添加all
//运动形式
        ease:(逐渐变慢)默认值
        linear:(匀速)
        ease-in:(加速)
        ease-out:(减速)
        ease-in-out:(先加速后减速)

css动画的运动形式

该属性是一个复合属性,可以拆分为以下4个属性:

transition可以拆分为:    
    transition-property  要运动的样式  (all || [attr] || none)
    transition-duration 运动时间【必选参数】
    transition-delay 延迟时间
    transition-timing-function 运动形式

二、2D变换、变形

学一个属性,和4个属性值

transform:translate|rotate|skew|scale;

  1. transform:translate;

    作用:类似于偏移属性left,top,改变盒子的位置。

    区别:left,top需要结合定位属性,但是transform不需要。

    transform:translate(x,y);
    可以拆分为两个子属性:
    transform:translateX(x);
    transform:translateY(y);
    特点:不会影响周边元素的位置。
  2. transform:rotate(deg);

    作用:让元素根据指定的度数旋转。

    //该属性不能拆分
    transform:rotate(90deg);
    //如果是正数,则是顺时针旋转
    //如果是负数,则是逆时针
  3. transform:skew(deg) –用得不太多
    作用:让元素扭曲变形

    transform:skew(x,y)
    //如果只写一个值,表示的是x方向,如果写两个,则x,y都斜切
    x表示水平方向斜切,y表示垂直方向斜切
    //可以拆分为:x,y
    transform:skewX(度数)
    transform:skewY(度数)
    //
    transfrom:skew(45deg)===> transform:skewX(45deg)
  4. transform:scale(x,y)
    作用:让元素缩放。默认是1,比1大则放大,比1小,则缩小

    transform:scale(1.2)//放大到原来的1.2倍
    //写法:
    transform:scale(0.5)
    transform:scale(1.2,1.5)
    transform:scaleX(1.2);//只有一个x方向放大
    transform:scaleY(1.2);//只有一个y方向放大
  5. 如何让一个元素使用多重动画效果

    transform:变换样式1 [变换样式2 变换样式3,4] 
    //也就是不能写成下面的效果
    transform:变换样式1 
    transform:变换样式2 
    transform:变换样式3

点击该网站看预览效果:https://www.joshwcomeau.com/css/transforms/

三、改变旋转中心

transform-origin 属性

设置元素转换的基点位置:

语法:
transform-origin:x y;
x的取值为left、center、right、px、%
y的取值为top、center、bottom、px、%
默认旋转中心为transform-origin:50% 50%;

四、运动的规则【总结】

  1. 动画一般是用户触发,所以动画会加在hover上或使用JS动态添加一个class来响应用户操作:比如鼠标摸上去或点击某个按钮等

  2. 行内元素需要转为块级或行内块级才可以使用动画效果(transform只能用于块级和行内块级)

  3. transition属性不仅仅只是服务于transform属性,还服务于其他的任何可以实现位移或者状态改变的样式,比如盒模型、透明度、偏移属性等。

  4. transition是一次性的,不能重复发生,除非再次触发

  5. transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态(类似于鼠标摸上去和鼠标离开)。

相关单词

  1. transform 变形、变换
  2. transition 过渡
  3. translate 移动,运输
  4. rotate 旋转
  5. skew 斜切
  6. scale 缩放
  7. origin 原始的
此资源下载链接已被无情的隐藏,请输入验证码解锁:
验证码

请关注本站公众号回复“验证码”,获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 1,270
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top