CSS3动画边距 [英] CSS3 animate margins

问题描述

尝试在CSS3边距中设置动画。哪个这个网站好像在说你可以，但它不适合我。

这是一个jsFiddle： http：// jsfiddle。 net / ybh0thp9 / 3 / （点击部分查看动画切换）。

这是我的CSS：

  .section {
显示：块; 
动画：淡入.5s缓解，margin-top .5s缓解，margin-bottom .5s缓解; 
} 
 .section.open {
 margin：20px 0; 
} 
  

我实际上有3个动画。 1为初始加载时的简单初始 fadeIn ，然后另外两个为点击时的空白动画。我也试过 margin 而不是顶部和底部，但仍然没有任何迹象表明它的工作。

解决方案

您不需要以下关键帧： http://jsfiddle.net/BramVanroy/ybh0thp9/7/

 过渡：边缘700ms; 
  

您需要将transition属性添加到您想要动画的基本元素中。

您还提到过您希望不透明度发生变化，但由于您只有一个没有孩子的元素，因此我不了解这种可能性。我的意思是：如果它隐藏，你不能点击该元素。

然而，你可以做的是增加整个事物的不透明度： http://jsfiddle.net/BramVanroy/ybh0thp9/9/

甚至更漂亮，带有转换：

http://jsfiddle.net/BramVanroy/ybh0thp9/10/

  .section {
 margin：0; 
不透明度：0.7; 
 transform：scale（0.85）; 
转换：全部700ms; 
} 
 .section.open {
 margin：20px 0; 
 opacity：1; 
 transform：scale（1）; 
} 
  

---

在页面加载时淡入淡出元素。我们可以通过添加一个类 init 。

http://jsfiddle.net/BramVanroy/ybh0thp9/12/

  $（ 节 ）addClass（ 初始化）; // JS 
 .section.init {opacity：1;} // CSS 
  

---

使用关键帧： http://jsfiddle.net/BramVanroy/ybh0thp9 / 14 /

  @  -  webkit-keyframes fadeIn {from {opacity：0; }到{不透明度：1; }} 
 @ -moz-keyframes fadeIn {from {opacity：0; }到{不透明度：1; }} 
 @keyframes fadeIn {from {opacity：0; }到{不透明度：1; }} 
 
 -webkit-animation：fadeIn 1.5s ease; 
 -moz-animation：淡入1.5s缓解; 
动画：淡入1.5s缓解; 
  

Trying to animate in CSS3 margins. Which this site seems to say you can, but it's not working for me.

Here is a jsFiddle: http://jsfiddle.net/ybh0thp9/3/ (Click on a section to see animation toggle).

Here is my CSS:

.section{
    display: block;
    animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;
}
.section.open {
          margin: 20px 0;
}

I actually have 3 animations. 1 for a simple initial fadeIn on initial load, then the 2 others for the margin animation on click. I've also just tried margin instead of the top and bottom but still no sign of it working.

解决方案

You don't need keyframes for this: http://jsfiddle.net/BramVanroy/ybh0thp9/7/

transition: margin 700ms;

You need to add the transition property to the base element that you wish to animate.

You also mentioned that you wanted opacity change, but I don't see how that's possible considering you only have a single element without children. I mean: you can't click on the element if it's hidden.

What you can do, though, is add opacity to the whole thing: http://jsfiddle.net/BramVanroy/ybh0thp9/9/

Or even prettier, with a transformation:

http://jsfiddle.net/BramVanroy/ybh0thp9/10/

.section {
    margin: 0;
    opacity: 0.7;
    transform: scale(0.85);
    transition: all 700ms;
}
.section.open {
    margin: 20px 0;
    opacity: 1;
    transform: scale(1);
}

---

Per comment, you want to fade in the elements on page load. We can do that by adding a class init.

http://jsfiddle.net/BramVanroy/ybh0thp9/12/

$(".section").addClass("init"); // JS
.section.init {opacity: 1;} // CSS

---

With keyframes: http://jsfiddle.net/BramVanroy/ybh0thp9/14/

@-webkit-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }

-webkit-animation: fadeIn 1.5s ease;    
-moz-animation: fadeIn 1.5s ease;
animation: fadeIn 1.5s ease;

这篇关于CSS3动画边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！