CSS3变换...简单的动画来移动图像答案

【问题标题】：CSS3 transform ... simple animation to move imageCSS3变换...简单的动画来移动图像
【发布时间】：2019-12-18 10:45:19
【问题描述】：

我尝试用图像制作一个简单的动画。目标是： - 在原点，图像应位于屏幕中心，比例为 100 - 从原点到动画的 50%，图像将缩放到 1 - 从 50% 到 75% 的动画，没有任何变化（图像仍然在屏幕中心，比例为 1） - 从动画的 755 到 100%，图像移动到屏幕的左上角。（保持比例为 1）

但我无法找到如何做到这一点......有人可以帮助我吗？

这是我的代码：

<?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>

谢谢，广告

【问题讨论】：

标签： css animation

【解决方案1】：

好的，我很抱歉，但我自己找到了答案 :) 如果有人有更好的方法，当然很高兴知道

<?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>

【讨论】：