过渡属性

过渡就是元素从一种样式逐渐改变为另一种的效果，一定要添加过渡持续时间才有过渡效果 transition: 要过渡的属性【持续的时间】延迟时间速度类型;

transition-property: all,width,height;过渡的属性

取值：

all 过渡的所有属性
property 要过渡的属性
none 没有过渡的属性

transition-duration: 2s,1s;过渡持续的时间，必需项，不写或为0都是没有过渡
transition-delay：2s,1000ms; 过渡的延迟时间，等待几秒开始过渡
transition-timing-function: ease;过渡的速度类型

取值：

ease：默认值（慢-快-慢）
ease-in 【慢速结束】的运动（加速）
ease-out 【慢速结束】的运动 (减速)
ease-in-out【慢速开始慢速结束】的运动（开始加速最后减速）
linear 【匀速】的运动
cubic-bezier(1, 0.16, 0, 1.02)，自己定义贝塞尔曲线的速度类型

    div{
        transition: all 3s 2s linear;
    }

css3变换：

transform属性,大多数浏览器都支持，默认值为none,也可以设置函数来进行变换

2d变换

css3中2d变换坐标轴：水平向右是x轴正值，垂直向下是y轴正值

2d平移

transform:translate(x,y) 2d平移,

两个值：

水平方向平移距离20px，正值向右移动距离20px，负值向左移动
垂直方向平移距离，正值向下移动，负值向上移动

一个值：水平方向移动的距离

指定方向写法：
translateX(20px),指定水平方向移动距离
translateY(20px),指定垂直方向移动距离

2d旋转

transform：rotate(deg),2d旋转
取值：
正值：顺时针
负值：逆时针

2d缩放

transform：scale(x,y) 默认值为1
两个值：元素的宽，元素的高
一个值：宽高同比例的缩放

取值

值在0-1之间：缩小
值>1：放大
值<0：先翻转后缩放

指定方向进行缩放

scaleX()指定宽度缩放
scaleY()指定高度缩放

2d倾斜(拉伸)

transform：skew(x,y) 元素倾斜改变元素在页面中的形状
两个值：水平方向和垂直方向同时倾斜
一个值：只有水平方向倾斜，第二个值不写就是0
取值：角度

指定方向进行倾斜

skewX() 仅水平方向(X轴)倾斜
skewY() 仅垂直方向(Y轴)倾斜

示意图：

   transform:skew(30deg,10deg);倾斜效果如下图1

  transform:skewX(30deg);倾斜效果如下图2

transform:skewY(10deg);倾斜效果如下图3

注意：多个变形用空格分隔

transform: rotate(360deg) scale(0.5);

transform-origin:改变元素的变换原点
取值：水平：left center right 垂直：top center bottom
注意：只写一个方向，另一个默认居中

3d变换

css3中3d变换坐标轴：水平向右是x轴正值，垂直向下是y轴正值,向前是z轴的正值
transform-style:规定嵌套的子元素是否以3d空间展示
preserve-3d:让子元素保留其3d位置
flat：不保留其3d位置
注意：不能和overflow:hidden同时使用，会让子元素的3d空间失效

perspective:数值
视距，让3d元素有近大远小的效果
建议500p-800px

3d的平移

transform:translateZ(npx) 3d沿z轴平移
正值：向前移动
负值：向后移动 transform:translate3d(x,x,z),同时移动3个方向的距离

3d的旋转

transform:
rotateX(deg) 正值：向里面，负值：向外面
rotateY(deg) 正值：向右，负值：向左
rotateZ(deg) 正值：顺时针，负值：逆时针
transform: rotate3d(1,1,1,45deg);

3d的缩放

transform: scaleZ():z轴的缩放大小 scale3d(1.2,1.2,1.2)三个方向进行缩放

盒子水平垂直居中的小技巧

在不知道宽高的时候，可以通过transform:translate()来实现盒子的水平垂直居中，使用时要考虑到兼容性问题

    .wrap{
        position:relative
    }
    .wrap2 div{
         
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;

        transform: translateX(-50%) translateY(-50%);

    }

css3帧动画

1. 定义动画（关键帧）

     @keyframes 动画名称 {
      from{}
      to{}
       }
     @keyframes 动画名称 {
        0%{} 动画的开始
        30%{}
        50%{}
        ....
        100%{} 动画的结束
       }

注意：动画名称是英文，名字自定义，比如：move scale

2. 调用动画

animation: animation-name animation-duration animation-timing-function animation-delay animation-direction animation-fill-mode 【动画名称动画时间】动画速度类型动画的延迟时间动画是否反向动画是否保持最初或最后的状态
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
linear 匀速
ease
ease-in
ease-out
ease-in-out

animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
n 动画n次，默认是1次
infinite 无穷次

animation-direction 规定是否应该轮流反向播放动画。
reverse 反向播
alternate 正向反向轮流播
normal 正向播

animation-fill-mode 动画是否保持第一帧或者最后一真的状态
forwards: 动画结束保持最后一帧的状态
both: 动画结束保持最后一帧的状态,动画未开始时保持第一帧状态
backwards: 动画未开始时保持第一帧状态，需要配合延迟才能看出效果

注意： animation-duration 属性，默认值为0，需要设置该属性，否则不会播放动画

3. 动画库

animate.css css3动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等动画效果；
官网网址：animate.style
使用方法：

1) 引入css动画库

    <link rel="stylesheet" href="./css/animate.css">

2) 找到标签，添加基本类名animate__animated，和动画类名animate__pulse

    <div class="animate__animated animate__pulse">我是文本</div>

网站首页 > 技术文章正文

css3各种动画的基本使用方法（css3中动画属性的原理和实现方法）

过渡属性

猜你喜欢

网站首页 > 技术文章 正文

css3各种动画的基本使用方法（css3中动画属性的原理和实现方法）

过渡属性

猜你喜欢

网站首页 > 技术文章正文