Question

我只是尝试使用 CSS 动画移动页面左下角的<p>元素。但我无法正确制作动画。动画从原始位置开始，突然在底部结束。我希望它一直很流畅。

请帮我正确的代码。

以下是我的代码：

＆＃13;

$("#expandable").on('click', function(event) {
  $("#expandable p").addClass("animated rotateOutUpLeft");
});

＆＃13;

.animated {
  animation-duration: 2s;
  animation-fill-mode: both;
}

@keyframes rotateOutUpLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 1;
    margin: 5px;
    position: fixed;
    left: 20px;
    bottom: 100px;
  }
}

.rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h1>Header</h1>

    <div id="expandable">
      <div style="border: grey solid 2px;">
        <h2>clickable div</h2><br>
        <p><strong>text to move</strong></p>
      </div>
    </div>

</body>

</html>

＆＃13;

Answer 1

您真的不需要CSS @keyframes来执行此操作：

＆＃13;

$("#expandable").on('click', function(event) {
  $("#expandable p").addClass("animate");
});

＆＃13;

.animate {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -90deg) translateX(-50px);
    margin: 5px;
    transition: all 2s ease;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h1>Header</h1>

    <div id="expandable">
      <div style="border: grey solid 2px;">
        <h2>clickable div</h2><br>
        <p><strong>text to move</strong></p>
      </div>
    </div>

</body>

</html>

＆＃13;

Answer 2

问题是您正在将元素的位置从静态（默认值）更改为固定，这是不可动画的。

一种解决方案是将其位置初始设置为fixed，并仅更改动画中的bottom属性。

＆＃13;

$("#expandable").on('click', function(event) {
  $("#expandable p").addClass("animated rotateOutUpLeft");
});

＆＃13;

body {
  position: relative;
  min-height: 100vh;
}

.animated {
  animation-duration: 2s;
  animation-fill-mode: both;
}

#expandable p {
  left: 40px;
  bottom: calc(100% - 160px);
  position: absolute;
}


@keyframes rotateOutUpLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 1;
    margin: 5px;
    left: 20px;
    bottom: 10px;
  }
}

.rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h1>Header</h1>

    <div id="expandable">
      <div style="border: grey solid 2px;">
        <h2>clickable div</h2><br>
        <p><strong>text to move</strong></p>
      </div>
    </div>

</body>

</html>

＆＃13;

使用动画

2 个答案: