[2022.10.02(Sun)] Advanced CSS

Jun's Coding Journey·2022년 10월 2일
0

[Learn] HTML / CSS

목록 보기
8/30

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;

Transformations

  • 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 Queries

  • 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;
  }
}
profile
Greatness From Small Beginnings

0개의 댓글