CSS3 转换动画transform

简介: 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 您可以使用 2D 或 3D 转换来转换您的元素。

👦个人简介:张清悠,字澄澈,号寻梦客,爱好旅行、运动,主攻前端方向技术研发,副攻Unity 3D、C++、Python人工智能等
📝个人寄语:学会不为过程的缓慢而焦虑,即使暂时未能如你所愿,但只要你在努力,你就在不断成长!
🙏个人公众号:清悠小猿(海量源码尽在其中,欢迎关注)

CSS3 转换:

通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
您可以使用 2D 或 3D 转换来转换您的元素。

一、transform:2D 转换方法:子属性:translate()、rotate()、scale()、skew()

    1.translate(x,y);偏移
        a): translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)。
        b): translateX(x)仅水平方向移动(X轴移动)。
        c): translateY(y)仅垂直方向移动(Y轴移动)。

    2.rotate(ndeg):旋转n为数字
    3.scale(x,y) 缩放  让元素根据中心原点对对象进行缩放   x,y表示倍数
        a): scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)。
            注意:Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。
        b): scaleX(x)元素仅水平方向缩放(X轴缩放)。
        c): scaleY(y)元素仅垂直方向缩放(Y轴缩放)。
    4.skew(xdeg,ydeg) 倾斜变形
        a):skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)。
            第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。
        b): skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形)。
        c): skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)。

二、原点 transform-origin(x,y) x,y可以用百分比来表示

表示原点的横向距离和纵向距离
在没有重置transform-origin改变元素原点位置的情况下,
CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。
我们可以通过transform-origin来对元素进行原点位置改变
例: transform-origin: 0 0; 以左上角为原点
50% 0; 以上中为原点
100% 50% 以右中为原点

三、transtion:过渡动画:

transition属性是一个复合属性,主要包括以下几个子属性:

    1、transition-property:指定过渡或动态模拟的CSS属性。
        所有的css属性用all
    2、transition-duration:指定完成过渡所需的时间。
        单位是s秒或者ms毫秒
    3、transition-timing-function:指定过渡函数。
        ease:由快到慢
        linear:匀速
        ease-in:加速
        ease-out:减速
        ease-in-out:先加速再减速
    4、transition-delay:指定开始出现的延迟时间。
            单位是s秒或者ms毫秒。
transition:要改变的属性或all 时间;
例如:transtion:width 2s;
    transtion:all 3s

四、@keyframes介绍:

keyframes被称为关键帧,。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果
在@keyframes中定义动画名称时,其中0%和100%还可以使用关键词from和to来代表,其中0%对应的是from,100%对应的是to。

第一步:在css样式中,先定义动画样式
    @keyframes  动画名{
        from{ css样式}
        to{ css样式 }
    }
    或者使用百分号
    @keyframes 动画名 {
            0%{
                left: 0;
                top: 0;
            }
            30%{
                left: 800px;
                top:0;
                border-radius: 50%;
            }
            60%{
                left: 800px;
                top:400px;
                background-color: red;
                border-radius: 50%;
                transform: scale(.5);
            }
            90%{
                left: 0;
                top:400px;
                background-color: green;
                border-radius: 50%;
            }
            100%{
                left: 0;
                top: 0;
            }
        }
第二步:使用animation应用动画

        animation:动画名

五、animation:

组合写法(简写):animation: myfirst 5s linear 2s infinite alternate both;

分开写
    1、调用动画 animation-name: 主要是用来调用 @keyframes 定义好的动画名

    2、设置动画播放时间 animation-duration:  单位:s

    3、置动画时间外属性 animation-fill-mode: 
                none: 默认值,表示动画将按预期进行和结束,在动画完其最后一帧时,动画会反转到初始帧处
                forwards: 表示动画结束后继续应用最后的关键帧的位置
                backwards: 会在向元素应用动画样式时迅速应用动画的初始帧
                both: 元素动画同时具有forwards和backwards效果

    4、设置动画播放方式 animation-timing-function: ease(由快到慢)/ linear(匀速) / ease-in(加速) / ease-out(减速) ease-in-out(先加速再减速)

    5、设置动画播放之前等待的时间 animation-delay: 单位:s

    6、设置动画播放次数 animation-iteration-count: 通常设置为整数, 默认值为1; 取值为infinite,动画将会无限次的播放

    7、设置动画播放方向 animation-direction: normal是默认值,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第奇数次向前播放,第偶数次向反方向播放

    8、设置动画的播放状态 animation-play-state: paused将正在播放的动画停下来; running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放
目录
相关文章
|
1月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
|
4天前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
16 0
JS配合CSS3实现动画和拖动小星星小Demo
|
1月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣,可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数,或者光标颜色等,来适应特定的设计需求。使用这种动态元素,增强网站的互动性和用户体验,同时也为网站增添了一抹活泼的风格。
41 5
|
30天前
|
前端开发 JavaScript
|
1月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
1月前
|
前端开发
CSS动画霓虹灯闪烁效果
CSS动画霓虹灯闪烁效果
|
1月前
|
前端开发 JavaScript
还在为酷炫css动画背景头疼吗?1分钟解决
还在为酷炫css动画背景头疼吗?1分钟解决
|
1月前
|
前端开发
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
|
1月前
|
前端开发
一键复制HTML+CSS动画 打造炫酷的搜索框
一键复制HTML+CSS动画 打造炫酷的搜索框
|
1月前
|
容器
html+css动画来袭!登录人人可领
html+css动画来袭!登录人人可领