CODEWITHSUNDEEP
cssanimation
adsofts
adsofts

Reputation: 21

CSS3 transform ... simple animation to move image

I try to make a simple animation with an image. The goal is: - At origin, image should be center in the screen with a scale 100 - From origin to 50% of the animation, the image will scale to 1 - From 50% to 75% of the animation, nothing change (image is still center in the screen with scale 1) - From 755 of the animation to 100%, the image move to the top left corner of the screen. (keeping the scale 1)

But i'm not able to find how to do that ... someone can help me please ?

this is my code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
  <head>
    <title>Exemple</title>
    <style>
        html { 
           width:100%; 
           height:100%;
        }
        .img-rectangular img {
            position:fixed;
            width:400px;
            height:400px;
            /*transform: translate(calc(100vw / 2 - 50%), calc(100vh / 2 - 50%));*/
            transform: translate(50%, 50%);
            animation: scale 3000ms linear;
        }
        @keyframes scale {
            from {
                transform: scale(100) translate(-50%, -50%);
            }
            50%, 75% {
                transform: scale(1) ;
            }
            to {
                transform: translate(0%, 0%);
            }
    </style>
  </head>
  <body>
    <div id="dnn_ctr428_ContentPane" class="img-rectangular">
      <div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
        <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
          <img alt="" src="http://lorempixel.com/400/400/nature/1">
        </div>
      </div>
    </div>
  </body>
</html>

Thank's, AD

Upvotes: 1

Views: 283

Answers (1)

adsofts
adsofts

Reputation: 21

Ok, i'm very sorry, but i just found my answer by myself :) If someone have a better way, it should be a pleasure to know of course

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
  <head>
    <title>Exemple</title>
    <style>
        html { 
           width:100%; 
           height:100%;
        }
        body {
            margin:0;
            padding:0;
        }
        .img-rectangular img {
            position:fixed;
            transform: translate(calc(100vw / 2 - 50%), calc(100vh / 2 - 50%)) scale(100);
            animation: scale 3000ms linear;
        }
        @keyframes scale {
            20%, 50% {
                transform: translate(calc(100vw / 2 - 50%), calc(100vh / 2 - 50%)) scale(1);
            }
            50%, 100% {
                transform: translate(0%, 0%);
            }
    </style>
  </head>
  <body>
    <div id="dnn_ctr428_ContentPane" class="img-rectangular">
      <div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
        <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
          <img alt="" src="http://lorempixel.com/400/400/nature/1">
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Related Questions