Use Transform Scale onClick

Question

I want an image to scale when I click a div element.

I want to click the div which links to another page and scale the image on the second page.

This is how I want the CSS to look:

.dragon {
   background-image: url(img/dragon.jpg);
   transform: scale(15);
   transition-duration: 1.7s;
   transition-timing-function: cubic-bezier(1, 0.1, 1, 0.1);
   transition-delay: 1s;
}

Below is the div on the 1st page:

<div className="home-littlefinger-img-container">
    <Link to="/dragon" className="littlefinger-img" name="littlefinger"> </Link>
</div>  

I want the onClick function attached to the link element.

This is the 2nd page:

class Dragon extends Component {
  constructor(props) {
    super(props);
        this.state = {
    };
  }

  render() {
    return (
       <div className="dragon-img-container">
          <div className="dragon"></div>
       </div>
    );
  }
}

export default Dragon;

(I only want to use CSS for the scaling.)

Answer 1

You should use animation not transition. That way you can control much better the timing of the 'scaling'

See snippet below :

.dragon {
   background-image: url('http://via.placeholder.com/70x50');
   height:50px;
   width:70px;
   animation-delay:1s;
   animation-duration:1.7s;
   animation-timing-function:cubic-bezier(1, 0.1, 1, 0.1);
   animation-name: scaleAnimation;
   animation-fill-mode:forwards;
}

@keyframes scaleAnimation {
  0% {transform:scale(1);}
  100% {transform:scale(15);}
}

<div class="dragon-img-container">
  <div class="dragon"></div>
</div>