Transitions
- A transition is a way that an element can be animated from one phase to another.
- This property will only work with an element without a state.
- Transition property should always be applied on the initial element.
a {
color: wheat;
background-color: tomato;
transition: background-color 10s ease-in-out;
}
a:hover {
color: tomato;
background-color: wheat;
}
- There are also functions in the transition property which tells the browser how an element should be animated.
- We can find lots of transition functions on the internet.
- Most used: ease-in, ease-out, ease-in-out.
transition: all 1s ease-in-out;
transition: all 1s linear;
transition: all 1s all;
- The transform property literally allows you to transform an element in a specific way.
- 3D effects can be applied with images using the transform property.
- Transformations do not get affected by box elements.
// rotating an element
---
img {
transform: rotateY(40deg) rotateX(20deg) rotateZ(30deg);
}
// scaling an element (pulling)
---
img {
transform: scaleY(4);
}
// moving an element (pulling)
---
img {
transform: translateX(-1000px);
}
- Transition and transformation effects can be combined.
img {
border: 10px solid black;
border-radius: 50%;
transition: transform 5s ease-in-out;
}
img:hover {
transform: rotateZ(90deg)
}
Animation
- To make an animation start moving without the need of hovering the mouse, we can use the @keyframes function with a name of the animation.
// example
---
@keyframes coinFlip {
from {
transfrom:rotateX(0);
}
to {
transform:rotateX(360deg);
}
}
img {
border: 10px solid black;
border-radius: 50%;
animation: coinFlip 5s ease-in-out;
}
- To translate back to its original position we move from 0% to 100% (animating back to where the translation started from).
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(180deg) translateY(100px);
}
100% {
transform: rotateY(0);
}
- Media Query is the concept of controlling the screen size of various web devices that can be used to view browsers (ex. laptop, phone, tablets) just by using CSS.
- This is important as people could be using all kinds of devices to view the web.
@media screen and (max-width: 400px) {
div {
background-color: tomato;
}
}