使用关键帧动画,id为“ Second”的div会在“ first” div开始之前进行动画设置。 这是我的代码,默认情况下它们不应该以相同的速度移动吗? 任何帮助将非常感谢。

body { background-color: black; color: white;}

#First { width: 200px; 
   height: 50px;  
   position: absolute; 
   top:5px; 
   color: black; 
   text-align: center; 
   background-color: yellow; 
   -webkit-transform-origin: top;
   -webkit-animation: myfirst 1s;
   -webkit-transform:rotateX(90deg);
   -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes myfirst
{
0%  {-webkit-transform:rotateX(0deg);}
100% {-webkit-transform:rotateX(90deg);}
}

#Second { width: 200px; 
      height: 50px;  
      position: absolute; 
      top:5px;  
      left:200px;
      color: black; 
      text-align: center; 
      background-color: green;
      -webkit-transform-origin: bottom;
      -webkit-animation: mysecond 1s;
      -webkit-transform:rotateX(0deg);
      -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes mysecond
{
0%  {-webkit-transform:rotateX(90deg);}
100% {-webkit-transform:rotateX(0deg);}
}

和HTML

<div id="First">FIRST</div>
<div id="Second">SECOND</div>

jsfiddle上的代码: http : //jsfiddle.net/x3p64/

===============>>#1 票数:1

演示

两者的@-webkit-keyframes不同

根据要求

新演示

@-webkit-keyframes myfirst {
    0% {
        -webkit-transform: scaleY(0);
    }
    20% {
        -webkit-transform: scaleY(0.2);
    }
    40% {
        -webkit-transform: scaleY(0.4);
    }
    60% {
        -webkit-transform: scaleY(0.6);
    }
    80% {
        -webkit-transform: scaleY(0.8);
    }
    100% {
        -webkit-transform: scaleY(1);
    }
}

@-webkit-keyframes mysecond {
    0% {
        -webkit-transform: scaleY(1);
    }
    20% {
        -webkit-transform: scaleY(0.8);
    }
    40% {
        -webkit-transform: scaleY(0.6);
    }
    60% {
        -webkit-transform: scaleY(0.4);
    }
    80% {
        -webkit-transform: scaleY(0.2);
    }
    100% {
        -webkit-transform: scaleY(0);
    }
}

===============>>#2 票数:0

不是因为它是从前开始的,而是因为缓动特性而看起来像它。 两种动画是同时开始和停止的,只是看起来不同。 尝试对两者都使用linear缓动。

-webkit-animation: mysecond 1s linear;

  ask by user3533049 translate from so

未解决问题?本站智能推荐:

2回复

角度动画:div在另一个div后面输入

我正在尝试在Angular 7应用程序中做一件简单的事情。 基本上,我有一个标题,当我单击它时,注释会从上方ease-in ,以使其本身恰好位于标题下方。 问题是,当注释移动时, 它会显示在标题的顶部,这并不是想要的效果。 我尝试在CSS上添加z-index属性以提升标题,但无济于
3回复

动画的动作

我正在尝试学习jQuery并且正在修改一个小项目以尝试通过练习来学习,但我仍然坚持如何动画一个div到另一个div的运动。 为了澄清,当我点击一个div时,我想要一个不同的div移动到我点击的div。 我正在使用appendTo()将他移动到那里,但正如你已经知道的那样,这个动作是即时的
1回复

如何使用jQuery从一个div到另一个div制作div动画?

这是我的代码 var x; var y; $('.animateclass').each(function(index) { x = $(this).position().left; y = $(this).position().top; }); $('.hex2').each(f
1回复

单击另一个div时如何为div设置动画,以及如何使动画div移动其他元素

当我按另一个div ,我想给一个div设置动画,但是我不知道如何操作。 我还希望动画div移动其他元素,而不是仅在它们上方设置动画。 当我这样做时, div在直接下方的图像上方进行动画处理。 我希望它推动他们。 我该如何实现。 这是我到目前为止所拥有的。 这是一个小提琴htt
1回复

jQuery动画。 动画div始终位于最前面。 我需要它在另一个div后面

我正在使用jquery设置默认情况下隐藏的div的动画,当用户单击一个按钮时,该按钮从该按钮的底部和后面出现。 但是,当使用animate()时,动画总是出现在按钮的前面(无论Z索引如何)。 我可以改变这种行为吗? 基本上这就是我所拥有的: 动画触发:
1回复

使用CSS动画将div幻灯片更改为另一个div

我在容器(也是div)内有两个div(第1页和第2页),该容器具有overflow:hidden属性,但是当动画启动时,溢出配置将被忽略。 此外,没有出现在上一页移动时应该显示的页面。 https://jsfiddle.net/ok0hpw3s/
3回复

如何制作动画

首先,感谢您在小组中接受我。 我需要有关jQuery动画的问题的帮助。 这是我在此模板(模板怪兽)的导航菜单中的项目上发现的动画。 http://www.templatemonster.com/demo/40492.html 显然,这是两个在画布上移动并在某个点逐渐消失的图像。
1回复

另一个div与第一个div一起移动(在第一个div的动画上)

我的目标是建立一个图像滑块,在运行APPLE徽标动画的同时,苹果产品从下方掠过。 问题是这样的,我添加了@keyframes动画以使iPhone从右(我们的右)出现,然后在将屏幕向左猛扑时离开。 但是当我添加MACBOOK时,甚至没有添加动画或任何动画时,它就可以与iPhone一起运行!
2回复

在另一个动画(CSS / HTML)之后开始动画

我想在第一个动画完成后开始动画,但我不知道该怎么做。 我希望在第一个动画后2秒后将文本转到页面顶部。 这是我的代码。 谢谢 :) CSS: 和HTML:
2回复

animateIn另一个动画问题

我正在尝试创建两组带有容器动画的文本。 我想在页面加载时显示的第一个文本div,并从左侧转到目标点。 我要在第一个文本div之后开始动画制作第二个文本div,出于某些原因,该代码在我的代码段中不起作用? 我将在评论部分中发布一个jsfiddle。 但是,我的第二个文本div无法正常运