css动画8.8

线性渐变

属性：linear-gradinet(开始位置 角度，起始颜色，终止颜色 )

• 开始位置：渐变开始的位置，属性值可以为百分比/长度/left、right、top、bottom（可组合使用）
• 角度：渐变终止方向的角度，当开始位置为数值或百分比时候可用
• 起始颜色
• 终止颜色
• 重复渐变将属性修改为：repeating-linear-gradinet()
• 可以通过百分比和像素改变各颜色所占区域

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

径向渐变

属性：radial-gradinet()(形状 发散方向，起始颜色，终止颜色)

• 形状:ellipse（椭圆）/circle（圆形）
• 发散方向：属性值可以为 left、right、top、bottom、center（可组合使用）
• 大小(半径)：属性值可用像素或关键字表
• • oclosest-side:圆心到距离最近的边
• • farthest-side:圆心到距离最远的边
• • closest-corner：圆心到距离最近的角
• • farthest-corner：圆心到距离最远的角
• 起始颜色…
• 终止颜色…
• 重复的径向渐变：repeating-radial-gradinet()

#grad {
  background-image: radial-gradient(red, yellow, green);
}

动画效果

transform：2D 变形：

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长
或拉伸。转换方法：
translate()平移/rotate()旋转/scale()放大缩小/skew()倾斜/matrix()

• none 定义不进行转换。
• translate(x,y) 定义 2D 平移转换
• translateX(x) 定义转换，只是用 X 轴的值。
• translateY(y) 定义转换，只是用 Y 轴的值
• scale(x,y) 定义 2D 缩放转换。
• scaleX(x) 通过设置 X 轴的值来定义缩放转换
• scaleY(y) 通过设置 Y 轴的值来定义缩放转换
• rotate(angle) 定义 2D 旋转，在参数中规定角度。
• skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
• kewX(angle) 定义沿着 X 轴的 2D 倾斜转换
• skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

//平移向左50ox向下100px
div
{
transform: translate(50px,100px);
}

//顺时针旋转30°
div
{
transform: rotate(30deg);
}

//div 元素的宽度是原始大小的两倍，高度是原始大小的三倍。
div {
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    transform: scale(2,3);
}

//按照x轴旋转30°，按照y轴旋转20°
div
{
transform: skew(30deg,20deg);
}

过渡

• 通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript
  的情况下，当元素从一种样式变换为另一种样式时为元素
  添加效果。
• CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：把效果添加到哪个CSS 属性上/规定效果的时长

过渡动画的属性：

• transition 简写属性，用于在一个属性中设置四个过渡属性。
• transition-property 规定应用过渡的 CSS 属性的名称。
• • none 没有属性会获得过渡效果。
• • 所有属性都将获得过渡效果。
• • 属性名称
• transition-duration 定义过渡效果花费的时间。默认是 0。单位是秒或毫秒
• transition-timing-function 规定过渡效果的时间曲线。默认是"ease"。
• • linear 规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）。
• • ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
• • ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
• • ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
• • ease-in-out 规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）。
• • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义 自己的值。可能的值是 0 至 1 之间的数值。
• transition-delay 规定过渡效果何时开始。默认是0

动画属性

1. animation-name:指定要对当前元素颜色生效的关键帧的名字
2. animation-duration:指定动画的执行时间
3. animation-timing-function:跟transition-timing-function用法一样
4. animation-iteration-count:指定动画执行的次数 animation-iteration-count:infinite;（无限执行）
5. animation-direction:指定动画运行的方向
   normal 默认值 从from向to运行 每次都是这样
   reverse 从 to 向 from 运行 每次都是这样
   alternate 从 from 向 to 运行 重复执行动画时反向执行
   alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行
6. animation-play-state:设置动画的执行状态
   可选值:
   running 默认值 动画执行
   paused 动画暂停
7. animation-fill-mode:指定动画的填充模式
   可选值:
   none 默认值 动画执行完毕元素回到原来位置
   forwards 动画执行完毕元素会停止在动画结束的位置
   backwards 动画延时等待时，元素就会处于开始位置
   both 结合了 forwards 和 backwards
8. animation-delay:设置动画的延时
9. transition:可以同时设置动画相关的所有属性,只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟。

//定义动画
@keyframes run {
    from {
        /* transform: translateX(100px); */
    }

    to {
        transform: translateY(50px);
    }
}

//绑定动画
.mb:hover~div:nth-child(3),
.mb:hover~div:nth-child(4) {
    /* display: block; */
    width: 100px;
    height: 100px;
    transition: 3s;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 5;
    animation: run 1s infinite alternate;
}