day13 过渡 动画 颜色

过渡

css的属性

transition:1s;

transition-duration:1s;时间属性

transition-timing-function过渡形式

transition-timing-function:linear;运动匀速

transition-timing-function:ease;慢快慢（默认运动属性）

transition-timing-function:ease-out;慢出

transition-timing-function:ease-in-out;慢入慢出

贝塞尔曲线

transition-timing-function:cubic-bezier(.12,.43,.23,.41)

过渡的延迟

transition-delay:4s;过渡延时

选择过渡属性

top:400px;left:400px;

transition-property:top;top属性获得过渡效果 只有移动top的要求时才有效果

过渡的复合写法

transition:过渡哪些属性 运动时间 运动速度方式 延迟时间；先运动时间后延迟时间;

动画

animation keyframes关键帧

@keyframes run{

        from{top:0;left:0;}/*动画的起点*/

        to{top:0;left:400px;}/*动画的终点*/

}

@keyframes run{
    0%{top:0;left:0;}
    50%{top:0;left:400px;}
    100%{top:400px;left:400px;}

}

animation-iteration-count:2;动画运行次数

animation-iteration-count:infinite;无限循环  iteration迭代  infinite无限

animation-timing-function动画节奏方式

animation-timing-function:ease;默认慢快慢

animation-timing-function:linear;匀速

animation-direction动画方向

animation-direction:reverse;倒放

animation-direction:alternate;来回 先正后返

animation-direction:alternate-reverse;回来 先反后正

暂停

animation-play-state:paused;

原始状态进入到动画的0%结束后，停在动画的100%

animation-fill-mode:forwards;

从动画0%开始，回到原始状态（默认是左上角）

animation-fill-mode:backwards;

从动画0%开始，回到100%

animation-fill-mode:both;

颜色

hsla

hsl(色调,饱和度,亮度)

div{
    background-color:hsl(0,100%,50%)
}

色调：红色（0）——绿色（120）——蓝色（240）——红色（360）

亮度50%是正常  越小越暗  越大越亮   0%是黑色 100%是白色

hsla(色调，饱和度，亮度，透明度)

透明度0是纯透明 1是不透明

当前色

currentColor 是css中background-color的属性值

div{
    color:red;
    background-color:currentColor;
}

背景颜色为红色

阴影

text-shadow:0px 0px 0px red;(x轴 y轴 模糊程度 颜色)

透明度

opacity

opacity:0;

删除：visibility:hidden;=display:none;