CSS3：仅在转换期间转换

Question

我知道我们可以将形状（例如圆形到正方形）从一种状态（例如顶部：0）转换为另一种状态（例如顶部：20px）。但我不确定我们如何才能在两种状态下保持形状完好无损（即保持圆圈@top:0 和 top:20px），但只有在过渡期间我想改变它的形状。我想要实现的一个例子有点像这样：

Answer 1

你可以使用css中的@keyframe动画，看一下：https://css-tricks.com/snippets/css/keyframe-animation-syntax/

这是我用关键帧和 jquery 动画制作的示例：

Css

#box{
            display: block;
            background: red;
            width: 300px;
            height: 300px;
            border-radius: 100%;
            position: relative;
        }
        @keyframes change_form {
          0% {
            width: 300px;
          }
          50% {
            border-radius: 0%;
            width: 50px;
            height: 100px;
          }
          100% {
            width: 300px;
            height: 300px;
          }
        }

Jquery

$(document).ready(function(){
   window.setTimeout(function(){
    $( "#box" ).animate({ 
                        "top":"+=134px"
                        ,
                    },{
    step: function(now) {
                if (now >= 11) {
                    $("#box").css({'transition':'all linear 1s', 'animation':'change_form ease 2s '});
                }
            } }
        );
    }, 2000);
});

简单来说Div

   <div id="box"></div>

只是我做的一个例子，向你展示如何制作这种效果，你只能用 css 制作这个，只需将 'animation' 放在你的 div[=14 中=]

Answer 2

这是您想要的纯 css 版本。它仅在过渡期间发生变化。一点都不难。只需使用关键帧来指定您想要更改的属性以及更改时间。

HTML

  <div class="childAnimated"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>

还有 CSS

.child {
  border: .5em solid white;
  width: 3em;
  height: 3em;
  border-radius: 5em;
  margin-bottom: 1em;
}

.childAnimated {
  position: fixed;
  top: 1em;
  left: 1em;
  z-index: 999;
  background-color: white;
  width: 3em;
  height: 3em;
  border-radius: 5em;
  -webkit-animation: gooAnim 4s infinite;
}

@-webkit-keyframes gooAnim {
  0%   { top: 1em; }
  25%   { top: 3.8em; left: 1.5em; width: 2em; height: 2em; }
  50%  { top: 6em; width: 3em; height: 3em; left: 1em;}
   75%   { top: 8.8em; left: 1.5em; width: 2em; height: 2em; }
  100% { top: 11em; }
}

如果您想实际查看它，请查看代码笔。运行如果可以的话，它在 Chrome 中。 http://codepen.io/shuffguy/pen/JdLXeM

这是一个简单的示例，但如果您使用关键帧大小调整属性，您绝对可以使用关键帧完全模拟该示例。

CSS3：仅在转换期间转换

CSS3: Transforming ONLY during Transition

css

transition

transformation

scale