Question

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

enter image description here

Answer 1

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

以下是我用关键帧和jquery animate制作的例子：

的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制作，只需将'动画'放在你的div中

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; }
}

如果你想看到它的实际效果，这就是codepen。如果可以，请在Chrome中运行它。 http://codepen.io/shuffguy/pen/JdLXeM

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

CSS3：仅在转换期间进行转换

2 个答案: