12.13-12.19 summary

         This week, I was working on the page again , I didn't expect that the content of the assessment suddenly changed when it was about to be assessed , Think about how you've been worrying about making your page a little more fancy this week , Most of the content learned this week is to show the fancy of the page .

         Although I didn't learn much , But at least I got something , For example, I know @keyframes The rule is the magic of making the page move without being stiff （ I think it's magic ）, Used to @keyframes After the rules, the picture can not only move , It can also specify when to change the look or color or position of the picture , Such as this

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}

It specifies how much color and distance the picture starts to change , And this transformation is not a rigid transformation , It makes people feel comfortable , Very smooth , It doesn't suddenly turn into any color , But there is a transition in the middle , So I think it's amazing , Sometimes when I see what I have knocked out, I really feel a good sense of achievement

Here is @keyframes Some properties that can be used in , I hope it helps you ~

attribute	describe
@keyframes	Specify the animation mode .
animation	Set the abbreviation of all animation attributes .
animation-delay	Specify the delay for the start of the animation .
animation-direction	The fixed animation is played forward 、 Play backwards or alternately .
animation-duration	Specifies the time it takes to complete a cycle of animation .
animation-fill-mode	Specifies the style of the element when the animation is not played （ Before the start 、 After the end , Or both ）.
animation-iteration-count	Specify the number of times the animation should be played .
animation-name	Regulations @keyframes The name of the animation .
animation-play-state	Specifies whether the animation runs or pauses .
animation-timing-function	Speed curve of specified animation .