容易忘记的css属性和动画属性

动画属性

@keyframes 关键帧 ——> animation 活泼 （配合使用）

transform 变换 ——> transition 过渡 （配合使用）

1、animation

animation : name,完成时间,速度曲线,延迟时间,播放次数,轮流反向播放动画

animation : name,5s,linear,infinite

属性作用介绍

• animation-name 规定需要绑定到选择器的 keyframe 名称。
• animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
• animation-timing-function 规定动画的速度曲线。 常用值值：linear 动画从头到尾的速度是相同的。
• animation-delay 规定在动画开始之前的延迟。
• animation-iteration-count 规定动画应该播放的次数。常用值值：infinite 无限次播放 。
• animation-direction 规定是否应该轮流反向播放动画。alternate 回来时反向

扩展

animation-fill-mode:forwards 让动画保持在最后一帧

animation-play-state:paused; 让动画在当前帧停止

2、 animation 动画过渡

transition: 属性名||all，完成时间，速度曲线，延迟时间;

transition: all 5s linear;

属性作用介绍

• transition-property 规定设置过渡效果的 CSS 属性的名称。
• transition-duration 规定完成过渡效果需要多少秒或毫秒。
• transition-timing-function 规定速度效果的速度曲线。常用值值：linear 动画从头到尾的速度是相同的。
• transition-delay 定义过渡效果何时开始。

3、transform 该属性允许我们对元素进行旋转、缩放、移动或倾斜

rotate 旋转，scale缩放，skew倾斜，translate移动

4、 box-shadow:水平,垂直,模糊距离,阴影的尺寸,阴影的颜色,将外部阴影 (outset) 改为内部阴影

box-shadow:5px 5px 5px 5px red outset;

实例

@keyframes 关键帧 + animation 活泼

.d1{
    animation: mymove 5s linear 1s infinite alternate;
    -webkit-animation: mymove 5s linear 1s infinite alternate;
    /*执行动画mymove  5s内完成  动画从头到尾的速度是相同的  无限次播放  回来时反向*/
}

@keyframes mymove
{
    0% {top:0px;}
    100% {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
    from {top:0px;}
    to {top:200px;}
}

transform 变换 + transition 过度

.d1{
    width: 206px;
    height: 206px;
    background: pink;
}

.d1{
    transform: rotate(0deg);
    transition: all 3s linear;
}
.d1:hover{
    transform: rotate(360deg);
}