Unsure of how to implement this transition/animation

问题

So I was able to create a 'flip-card' element; however, my issue is that I am trying to scale the entire element using transform: scale() so that about halfway through the rotation, I want the element to begin expanding to a bigger size/scale.

Just not sure if I use animations, multiple animations, or transitions only...or transitions + animation...just a bit confused what is the most effective approach.

I tried animations + transitions, like shown below, and it's very glitchy and acting unpredictably.

html, body {
  background: #f2edea;
  height: 100%;
  width: 100%;
}

img {
  width: 100%;
  max-height: 100%;
}

.flipcard {
  width: 150px;
  height: 200px;
  margin: auto;
  top: 20%;
  position: relative;
  box-shadow: 5px 5px 20px #c4c4c4;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
  transition: transform 2s;
} 

@keyframes grow {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(2);
  }
}

.flipcard:hover {
  transform: rotateY(180deg);
  animation: grow 1s; 
}

.front-side  {
  height: 100%;
  width: 100%;
  position: relative;
  backface-visibility: hidden;
  
}

.back-side {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  border-radius: 3px;
}

<div class='flipcard'>
  <div class='front-side'>
    <img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
  </div>
  <div class='back-side'>
    <img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
  </div>
</div>

回答1:

Your main issue here is that you are using transform in different places: in the hover state and in the animation. So one is overriding the other which create your issue. rotate and scale should be combined in the same transform property and you should start with scale(1) not scale(0). Then you should add forwards to the animation so you keep the last state when the animation ends.

In your initial code when you hover, the rotation is ignored as the transform of the animation will override the transform in the hover state. Then you will scale your element to 0 which means your element will have 0 height and width and you will lose the hover and your element will suddenly appear again (since there is no more hover so no more animation) and so on. This is the flicker you are having.

You may tell me why sometimes it works? Simply because if you have some luck (if the cursor is close to the middle) the animation will continue before you lose the hover and then it will end. When the animation ends, no more scale and the transform with rotation will now be considered.

Another important thing to consider when rotating an element on the Y axis : if the rotation is 90deg then your element will have a width equal to 0 at this state and you may also lose the hover again. An idea to avoid this is to add the hover to a container and rotate the child so that you will be sure you will never lose the hover as the container won't move.

html,
body {
  background: #f2edea;
  height: 100%;
  width: 100%;
}

img {
  width: 100%;
  max-height: 100%;
}
.container {
  width: 150px;
  height: 200px;
  margin:50px auto;
}
.flipcard {
  width: 150px;
  height: 200px;
  position: relative;
  box-shadow: 5px 5px 20px #c4c4c4;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
  transition: transform 2s;
}

@keyframes grow {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1) rotateY(180deg);
  }
  100% {
    transform: scale(2) rotateY(180deg);
  }
}

.container:hover .flipcard {
  animation: grow 1s forwards;
}

.front-side {
  height: 100%;
  width: 100%;
  position: relative;
  backface-visibility: hidden;
}

.back-side {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  border-radius: 3px;
}

<div class="container">
  <div class='flipcard'>
    <div class='front-side'>
      <img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
    </div>
    <div class='back-side'>
      <img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
    </div>
  </div>
</div>

回答2:

Use both scale and rotate transforms in a single animation.

html, body {
  background: #f2edea;
  height: 100%;
  width: 100%;
}

img {
  width: 100%;
  max-height: 100%;
}

.flipcard {
  width: 150px;
  height: 200px;
  margin: auto;
  top: 20%;
  position: relative;
  box-shadow: 5px 5px 20px #c4c4c4;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
  transition: transform 2s;
} 

@keyframes growandflip {
  from {
    transform: scale(1);
  }
  50% {
    transform: rotateY(180deg) scale(1);
  }
  100% {
    transform: rotateY(180deg) scale(2);
  }
}

.flipcard:hover {
  animation: growandflip 2s; 
}

.front-side  {
  height: 100%;
  width: 100%;
  position: relative;
  backface-visibility: hidden;
  
}

.back-side {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  border-radius: 3px;
}

<div class='flipcard'>
  <div class='front-side'>
    <img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
  </div>
  <div class='back-side'>
    <img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
  </div>
</div>

回答3:

@keyframes grow {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(2);
  }
}

来源：https://stackoverflow.com/questions/49078460/unsure-of-how-to-implement-this-transition-animation

标签

html

css

css3

css-transitions

css-animations