Day 43     task11-2

今天完成的事情

        今天实际上没有做关于task11的工作，而是根据之前的日报复习了一下以前的知识点

P.S.学会使用animation做出圆形的加载渐变动画，超好玩

animate.css网站 观察各样式代码可以更熟悉CSS动画效果

遇到的问题

       无

收获

       CSS动画

Transform和Translation

Trans穿过，穿越

Transform 变形（穿过形状）旋转元素

Translation 过渡 (穿过（名词）) 过渡动画

1.Transform变形（四类变换可随意组合）：

物理移动(2D或3D转换)

transform：translate（20px,20px）

缩放(2D或3D转换)

从中心出发，向两边进行缩放

transform：scale（2,1.5）

旋转(2D或3D转换)

transform：rotate（20deg）(同3D顺z轴旋转)【2D】

从中心旋转，默认顺Z轴旋转【3D】

顺X轴旋转

顺Y轴旋转

顺Z轴旋转 （默认）

倾斜旋转(2D转换)

transform：skew（20deg,20deg）

沿着 X 轴的 2D 倾斜转换。(y轴方向不变)

沿着 Y 轴的 2D 倾斜转换。(x轴方向不变)

2.Translation过渡动画（多属性变换可组合执行）

transition: width 2s ease 0s , height 1s linear 2s,background 3s ease 0s;

名称transition-property

规定设置过渡效果的 CSS 属性的名称。

时间transition-duration

规定完成过渡效果需要多少秒或毫秒。

速度曲线transition-timing-function

规定速度效果的速度曲线。（平滑过渡，快进慢出，慢进快出）

延迟transition-delay

定义过渡效果何时开始。

3.Animation关键帧动画

使用简写属性，将动画与 div 元素绑定，可定义多个帧下的动画

语法实例

.class{

      width：50px；

      height：50px；

Position：relative；

Animation : 动画名称pulse 关键帧5s 无限循环infinite；

}

@keyframes 动画名称pulse {           该动画即高宽为50px的矩形沿高宽为200px的矩形内边框四角点移动.

时间点0%（元素状态）{

Top：0px；

Left：0px；

Background : lightgreen;

}

时间点25%（元素状态）{

Top：0px；

Left：200px；

Background : lightred;

}

时间点50%（元素状态）{

Top：200px；

Left：200px；

Background : lightblue;

}

时间点75%（元素状态）{

Top：200px；

Left：0px；

Background : lightyellow;

}

时间点100%（元素状态）{

Top：0px；

Left：0px；

Background : lightgray;

}

}

属性

非动画状态animation-fill-mode

不能简化在animation中

规定对象动画时间之外的状态。

名称animation-name

规定需要绑定到选择器的 keyframe 名称。

时间animation-duration

规定完成动画所花费的时间，以秒或毫秒计。默认0

速度曲线animation-timing-function

规定动画的速度曲线。默认ease

延迟animation-delay

规定在动画开始之前的延迟。默认0

播放次数animation-iteration-count

规定动画应该播放的次数。默认1

是否反向播放animation-direction

规定是否应该轮流反向播放动画或在下一周期反向播放。默认normal

暂停animation-play-state

规定动画是否正在运行或暂停。默认是 "running"。

明天计划学习

         task11

注： 【unsolved】截日报发出前未解决的问题

        【solved】已解决现象但并未从根本上解决问题

        【solved】已解决