过渡动画

transition: property duration timing-function delay;

transition-property:
transition-duration:
transition-timing-function:
transition-delay:

.demo {
  background-color: #ccc;
  transition: 1s;
}

.demo:hover {
  background-color: #f40;
}

.demo {
  background-color: #ccc;
  transition: background-color 1s;
}

.demo:hover {
  background-color: #f40;
}

.demo {
  background-color: #ccc;
  transition: background-color 1s;
}

.demo:hover {
  background-color: #f40;
  transition: background-color 3s;
}

.demo {
  background-color: #ccc;
  font-size: 16px;
  transition: background-color 1s, font-size 1s;
}

.demo:hover {
  background-color: #f40;
  font-size: 20px;
  transition: background-color 1s, font-size 1s;
}

.demo {
  background-color: #ccc;
  font-size: 16px;
  transition: background-color 1s, font-size 1s;
}

.demo:hover {
  background-color: #f40;
  font-size: 20px;
  transition: background-color 1s, font-size 1s 1s;
}

.info-card img {
  position: relative;
  z-index: 1;
  transform-origin: left top;
  transition: .5s;
}

.info-card:hover img {
  transform: scale(0.8);
  transition: 1s;
}

.mars .img {
    transform-origin: top;
    transition: .4s;
}

.mars:hover .img {
    transform: scale(.5);
}

.mars .info {
    position: absolute;
    left: 0px;
    bottom: -60px;
    //......
    transition: .4s;
}

.mars:hover .info {
    bottom: 0px;
}

.rot div {
    position: absolute;
    left: -230px;
    top: -230px;
    width: 80%;
    height: 80%;
    border: 10px solid #b22222;
    transform-origin: left top;
    transition: 1s;
}

.rot:hover div {
    left: 10%;
    top: 10%;
    transform: rotate(360deg);
}

.tran div::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -180px;
    width: 320px;
    height: 180px;
    background-color: #fff;
    transform-origin: left top;
    transition: 1s;
}

.tran div:hover::after {
    transform: rotate(-20deg);
}

.border::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60%;
    height: 50%;
    border: solid #b22222;
    border-width: 4px 0;
    transform: translate(-50%, -50%) scaleX(0);
    transition: .4s;
}

.border::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 60%;
    border: solid #b22222;
    border-width: 0px 4px;
    transform: translate(-50%, -50%) scaleY(0);
    transition: .4s;
}

.border:hover::before {
    transform: translate(-50%, -50%) scaleX(1);
}

.border:hover::after {
    transform: translate(-50%, -50%) scaleY(1);
}

steps(number_of_steps，direction)

.loading {
    display: flex;
    width: 300px;
    height: 40px;
    border: 1px solid #f40;
    padding: 4px;
    margin: 100px auto;
}

.loading::before {
    content: '';
    width: 0%;
    height: 100%;
    background-color: #f40;
    transition: width 1s linear;
}

.loading:hover::before {
    transition: width 5s steps(5);
    width: 100%;
}

el.addEventListener("transitionstart", (event) => {});

el.addEventListener("transitionrun", (event) => {});

el.addEventListener("transitionend", (event) => {});

el.addEventListener("transitioncancel", (event) => {});

const wrap = document.querySelector('.demo-wrap');
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
  wrap.classList.toggle('active');
})
wrap.addEventListener('transitionend', () => {
  if (wrap.classList.contains('active')) {
  }
  window.location.href = './index.html';
})