본문 바로가기

Mini Projects

Custom Music Player (4) music-info (transition 여러개)

이 포스트는 Udemy 20 Web Projects With Vanila Javascript 보고 정리하는 내용입니다

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

 

20 Web Projects With Vanilla JavaScript

Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries)

www.udemy.com

 

 

 

/* Music-info */
.music-info {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px 10px 10px 150px;
  border-radius: 15px 15px 0 0;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 20px;
  width: calc(100% - 40px);
  transition: transform 0.3s ease-in, opacity 0.3s ease-in;
  transform: translateY(0%);
  opacity: 0;
}

.music-container.play .music-info {
  transform: translateY(-100%);
  opacity: 1;
}

 

transition에 콤마를 넣어서 두가지