Transition

Animation

Transform

Transition

transition:

the process or a period of changing from one state or condition to another.

Syntax

.box{
	transition: all 1s ease;
}
		

Properties

transition-property

transition-duration

transition-timing-function

transition-delay

Shorthand

.box{
  transition: all 1s ease 1s;
}
    

Flera transitions

.box{
  transition: color 1s ease,
              background 0.5s ease-in-out;
}
    

transition-duration

.box{
  transition: all 0.4s ease;
}
.box{
  transition: all 400ms ease;
}
    

transition-timing-function

linear

ease

ease-in

ease-out

ease-in-out

step-start

step-end

Transform

transform properties

.box{
  transform: transform-value;
}
    

.box{
  transform: translate(30px, 30px);
}
    

translate()

transform: translate(x,y);

transform: translateX(30px);
transform: translateY(30px);

scale()

transform: scale(2);

skew()

transform: skew(10deg, 20deg);

transform: skewX(10deg);
transform: skewY(20deg);

rotateX()

transform: rotateX(30deg);

rotateY()

transform: rotateY(30deg);

rotateZ()

transform: rotateZ(30deg);

Keyframe Animation

@keyframes

@keyframes

@keyframes myAnimation { 
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

@keyframes myAnimation { 
  from{
    opacity: 0;
    background: teal;
  }
  to{
    opacity: 1;
    background: slategray;
  }
}

@keyframes myAnimation { 
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

2.3.1 Three Flashes or Below Threshold

Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. (Level A)

Animation properties

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-duration

animation-fill-mode

animation-play-state

.box {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: ease;
  animation-fill-mode: none;
  animation-play-state: running;
}

https://css-tricks.com/snippets/css/keyframe-animation-syntax/

.box{
  animation: myAnimation 2s 1s normal ease none running ;
  }

normal samt none är default, behöver egentligen inte skrivas