提问



我目前正在设计一种CSSmega dropdown菜单 - 基本上只是一个普通的CSS下拉菜单,但包含不同类型的内容。


目前,似乎CSS3 Transitions不适用于display属性,即你不能进行从display: nonedisplay: block的任何转换(或任何组合)。


当有人将鼠标悬停在其中一个顶级菜单项上时,是否有人会想到上述示例中的第二层菜单可以淡入?


我知道你可以在visibility:属性上使用转换,但我不能想到一种有效利用它的方法。


我也尝试过使用高度,但这只是失败了。


我也意识到使用JavaScript实现这一目标是微不足道的,但我想挑战自己只使用CSS而且我认为我有点短暂。


所有和任何建议最受欢迎。

最佳参考


你可以连接两个或更多的转换,visibility这次是方便的。




div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>



您需要通过其他方式隐藏元素才能使其生效。


我通过绝对定位<div>并将隐藏的一个设置为opacity: 0来完成效果。


如果您甚至将display属性从none切换到block,则不会转换其他元素。


要解决此问题,请始终允许元素为display: block,但通过调整以下任何方法来隐藏元素:



  1. height设置为0

  2. opacity设置为0

  3. 将元素放置在具有overflow: hidden的另一个元素的框架之外。



可能有更多解决方案,但如果将元素切换为display: none,则无法执行转换。例如,您可以尝试尝试这样的事情:


div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}


但那将工作。根据我的经验,我发现这无所事事。


因此,你总是需要保留元素display: block - 但你可以通过做这样的事情来绕过它:


div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

其它参考1


在这篇文章发表时,如果你试图改变display属性,所有主流浏览器都会禁用CSS转换,但CSS动画仍然可以正常工作,因此我们可以将它们用作解决方法。


示例代码: - (您可以相应地将其应用到您的菜单)演示[124]


将以下CSS添加到样式表: -


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


然后将fadeIn动画应用于父hover上的子项: - (当然设置display: block)


.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

其它参考2


我怀疑如果显示发生变化,那么转换被禁用的原因是因为显示实际上是什么。它不改变任何可以想象得流畅动画的东西。


display:none;和visibility:hidden;是两个完全不同的东西。两者都具有使元素不可见的效果,但是visibility:hidden;它仍然在布局中呈现,但不是可见所以。隐藏元素仍然占用空间,并且仍然以内联或块或块内联或表格或display元素告诉它呈现为的任何内容呈现,并相应地占用空间。 不的其他元素会自动移动以占据该空间。隐藏元素不会将其实际像素呈现给输出。


另一方面,display:none实际上阻止元素完全呈现 。它不会占用任何布局空间。其他元素会占用此元素占用的部分或全部空间,现在可以调整占用该空间,就好像元素根本不存在。


显示不仅仅是另一种视觉属性。它建立元素的整个渲染模式,例如它是块,内联,内联块,表,表行,表格单元,列表项还是其他任何东西!每个都有非常不同的布局分支,并且没有合理的方式来动画或平滑过渡它们(试图想象从块到内联的平滑过渡,或反之亦然,例如!)。


这就是为什么在显示改变时禁用转换的原因(即使改变是来自或来自无 - 无不仅仅是不可见,它是它自己的元素渲染模式,这意味着根本没有渲染!),

其它参考3


display不是转型所依据的属性之一。


有关可应用转换的属性列表,请参见http://www.w3.org/TR/css3-transitions/#animatable-properties-。[125]

其它参考4


我知道这是一个非常古老的问题但是对于正在查看此线程的人来说,您现在可以向块属性添加自定义动画。


@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}


演示[126]


在此演示中,子菜单从display:none更改为display:block并仍然可以淡入淡出。

其它参考5


根据W3C 2013年11月19日的工作草案display不是动画属性。幸运的是,visibility是可动画的。您可以通过不透明度的转换(JSFiddle)链接其转换:[127] [128]



  • HTML:


    <a href="http://example.com" id="foo">Foo</a>
    <button id="hide-button">Hide</button>
    <button id="show-button">Show</button>
    

  • CSS:


    #foo {
        transition-property: visibility, opacity;
        transition-duration: 0s, 1s;
    }
    
    #foo.hidden {
        opacity: 0;
        visibility: hidden;
        transition-property: opacity, visibility;
        transition-duration: 1s, 0s;
        transition-delay: 0s, 1s;
    }
    

  • 用于测试的JavaScript:


    var foo = document.getElementById('foo');
    
    document.getElementById('hide-button').onclick = function () {
        foo.className = 'hidden';
    };
    
    document.getElementById('show-button').onclick = function () {
        foo.className = '';
    };
    



请注意,如果您只是使链接透明,而不设置visibility: hidden,那么它将保持可点击状态。

其它参考6


我整洁的JavaScript技巧将整个场景分成两个不同的功能!


为了准备事物,声明了一个全局变量并定义了一个事件处理程序:


  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome


然后,当隐藏元素时,我使用这样的东西:


function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}


为了重新出现元素,我正在做这样的事情:


function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}


它到目前为止有效!

其它参考7


编辑:在此示例中未显示任何未应用。


@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}


上面发生的是,当不透明度淡出时,99%的动画显示被设置为阻止。在最后一刻,显示属性设置为无。


最重要的一点是在动画结束后使用动画填充模式保留最后一帧:前进


.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}


以下是两个例子:https://jsfiddle.net/qwnz9tqg/3/[129]

其它参考8


我今天碰到了这个,我正在重用一个position: fixed模态。我不能保持它display: none然后动画它,因为它只是跳入外观,并且z-index(负值等)也做了奇怪的事情。


我也使用了height: 0height: 100%,但它只在模态出现时才有效。这与使用left: -100%或其他内容相同。


然后让我感到有一个简单的答案。瞧瞧:


首先,您隐藏的模态。注意height0,并在转换中检查height声明......它有500ms,比我的opacity长。转型。请记住,这会影响外出的淡出过渡:将模态返回到其默认状态。


#modal-overlay {
    background: #999;
    background: rgba(33,33,33,.2);
    display: block;
    overflow: hidden;
    height: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
       -moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
            -ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
         -o-transition: height 0s 500ms, opacity 300ms ease-in-out;
        transition: height 0s 500ms, opacity 300ms ease-in-out;
}


第二,您的可见模态。假设您正在.modal-active设置body。现在height100%,我的转换也发生了变化。我希望height是立刻改变了,opacity300ms


.modal-active #modal-overlay {
    height: 100%;
    opacity: 1;
    z-index: 90000;
    -webkit-transition: height 0s, opacity 300ms ease-in-out;
       -moz-transition: height 0s, opacity 300ms ease-in-out;
        -ms-transition: height 0s, opacity 300ms ease-in-out;
         -o-transition: height 0s, opacity 300ms ease-in-out;
            transition: height 0s, opacity 300ms ease-in-out;
}


就是这样,它就像一个魅力。

其它参考9


从其中一些答案和其他地方的一些建议中获取,以下内容适用于悬停菜单(我特别使用bootstrap 3):


nav .dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms, opacity 300ms;
    -webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0, opacity 300ms;
    -webkit-transition: max-height 0, opacity 300ms;
}


如果指定两个值,也可以使用height代替max-height,因为transition s不允许height:automax-height的悬停值需要大于菜单的height

其它参考10


overflow:hidden更改为overflow:visible。它效果更好。我这样用:


#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}


visible更好,因为overflow:hidden的行为与display:none完全相同。

其它参考11


而不是CSS中不存在的回调,我们可以使用transition-delay属性。


#selector {
    overflow: hidden; // hide the element content, while height = 0
    height: 0; opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: 100%; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}


那么,这里发生了什么?



  1. 当添加visible类时,heightopacity都会无延迟地开始动画(0ms),尽管height需要0ms才能完成动画(相当于display: block]]和opacity需要600毫秒。

  2. 删除visible类时,opacity开始动画(0ms延迟,400ms持续时间),高度等待400ms,然后立即(0ms)恢复初始值(相当于display: none在动画回调中)。



注意,这种方法比使用visibility的方法更好。在这种情况下,元素仍占据页面上的空间,并不总是合适的。


有关更多示例,请参阅此文章。[130]

其它参考12


我怀疑任何刚刚开始CSS转换的人都会很快发现,如果你同时修改display属性(block/none)它们就不会工作。还没有提到的一个解决方法是你可以继续使用display:block/none来隐藏/显示元素,但是将它的不透明度设置为0,这样即使它显示:block,它也是然后将其淡入,然后添加另一个CSS类,例如on,将不透明度设置为1并定义不透明度的过渡。正如您可能想象的那样,您将不得不使用JavaScript来添加on类的元素,但至少你仍然使用CSS进行实际转换。


附:如果您发现自己处于需要同时执行display:block,并将类添加为on的情况下,请同时使用setTimeout推迟后者。否则,浏览器只会立即看到这两件事,并禁用转换。

其它参考13


不需要javascript,也不需要极大的巨大高度。而是在文本元素上设置最大高度,并使用字体相对单位,如rem或em。这样,您可以设置大于容器的最大高度,同时避免延迟或菜单关闭时弹出:


HTML


<nav>
  <input type="checkbox" />
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</nav>


CSS


nav input + ul li { // notice I set max-height on li, not ul
   max-height: 0;
}

nav input:checked + ul li {
   max-height: 3rem; // a little bigger to allow for text-wrapping - but not outrageous
}


在这里查看示例:
http://codepen.io/mindfullsilence/pen/DtzjE[131]

其它参考14


在Guillermo接受的答案之后写了CSS
转换2012年4月3日的规范改变了可见性转换的行为
并且现在可以用更短的方式解决这个问题,而不使用
过渡延迟:


.myclass > div { 
                   transition:visibility 1s, opacity 1s; 
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div 
               {   visibility:visible; opacity:1 }


为两个转换指定的运行时间通常应该是
相同(虽然稍长的可见性时间不是问题)。
对于正在运行的版本,请参阅我的博客
http://www.taccgl.org/blog/css-transition-visibility.html#visibility-opacity.[132]


W.r.t.问题的标题在显示屏上转换:属性和
回应Rui Marques和josh对已接受答案的评论:
此解决方案适用于的情况,如果显示或不相关则无关紧要
使用可见性属性
(因为在这个问题中可能就是这种情况)。
它不会完全删除元素作为display:none,只需要它
不可见但它仍然停留在文档流中并影响以下元素的位置。
完全删除与display:none类似的元素的转换可以完成
使用高度(如其他答案和注释所示),最大高度或边距 - 顶部/底部,但也可以看到
我怎样才能过渡高度:0;高度:自动;用CSS?
和我的博客http://www.taccgl.org/blog/css_transition_display.html。 [134]


回应GeorgeMillo的评论:
需要属性和两个转换:不透明度属性
用于创建淡入和淡出动画和可见性
属性,以避免元素仍然对鼠标作出反应
事件。视觉效果的不透明度需要转换
可见性延迟隐藏直到淡出结束。

其它参考15


我终于通过将opacityposition absolute结合起来为我找到了一个解决方案(隐藏时不占用空间)。


.toggle {
  opacity: 0;
  position: absolute;
  transition: opacity 0.8s;
}

.parent:hover .toggle {
  opacity: 1;
  position: static;
}

其它参考16


我认为SalmanPK有最接近的答案,它可以使用以下CSS动画淡入或缩小项目。但是,display属性不能平滑动画,只有不透明度。


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

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


如果你想要动画元素从显示块移动到显示无,我不能看到它目前只有CSS,你必须获得高度并使用CSS动画来降低高度。这可以通过CSS如下面的示例所示,但要知道元素动画所需的确切高度值会很棘手。


jsFiddle 示例 [135]


CSS



@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}


的JavaScript



var element = document.getElementById("element");

// push item down
element.className = element.className + " push-down";

其它参考17


我觉得回答这么多答案的问题几乎是不好的,但是这个解决方案具有很好的兼容性,我还没有看到它:


.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}


解释:它使用visibility: hidden技巧(在一步中与show-and-animate兼容)但使用组合position: absolute; z-index: -1; pointer-events: none;确保隐藏的容器不占用空间无法回答用户互动

其它参考18


我已经多次遇到过这个问题,现在只需要:


.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}


通过添加类block--invisible,整个元素将不可点击,但其后面的所有元素都将是由于所有主要浏览器都支持的pointer-events:none(没有IE< 11)。

其它参考19


您可以将元素屏幕外存储,直到需要它为止,而不是使用显示,然后将其位置设置到您想要的位置并同时进行转换。这引出了许多其他设计问题,所以ymmv。您可能不想使用显示器,因为您希望屏幕阅读器可以访问内容,这在大多数情况下都会尝试遵守可见性规则 - 即,如果它不应该对眼睛可见,它不会显示为代理商的内容。

其它参考20


这个问题的最简单的通用解决方案是:随意在CSS中指定display:none,但是你将使用JavaScript将其更改为block(或其他任何东西),然后你也必须在你的元素中添加一个类,它实际上用setTimeout()进行转换。这就是全部。


即:


<style>
#el {
    display: none;
    opacity: 0;
}
#el.auto-fade-in {
    opacity: 1;
    transition: all 1s ease-out; /* future, future, please come sooner! */
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
}
</style>

<div id=el>Well, well, well</div>

<script>
var el = document.getElementById('el');
el.style.display = 'block';
setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>


在最新的理智浏览器中测试过。显然不应该在IE9或更早版本中工作。

其它参考21


您可以使用转换事件执行此操作,因此,您可以为转换构建2个css类,一个保持动画另一个,保持display none状态。并在动画结束后切换它们?在我的情况下,如果我按下btn,我可以再次显示div,并删除这两个类。


试试下面的剪辑......




$(document).ready(function() {
  //assign transition event
  $("table").on("animationend webkitAnimationEnd", ".visibility_switch_off", function(event) {
    //we check if this is the same animation we want  
    if (event.originalEvent.animationName == "col_hide_anim") {
      //after the animation we assign this new class that basically hides the elements.    
      $(this).addClass("animation-helper-display-none");
    }

  });

  $("button").click(function(event) {

    $("table tr .hide-col").toggleClass(function() {
      //we switch the animation class in a toggle fashion...
      //and we know in that after the animation end, there is will the animation-helper-display-none extra class, that we nee to remove, when we want to show the elements again, depending on the toggle state, so we create a relation between them.
      if ($(this).is(".animation-helper-display-none")) {
        //im toggleing and there is already the above classe, then what we want it to show the elements , so we remove both classes...        
        return "visibility_switch_off animation-helper-display-none";
      } else {
        //here we just want to hide the elements, so we just add the animation class, the other will be added later be the animationend event...        
        return "visibility_switch_off";
      }

    });

  });

});

table th {
  background-color: grey;
}

table td {
  background-color: white;
  padding:5px;
}

.animation-helper-display-none {
  display: none;
}

table tr .visibility_switch_off {
  animation-fill-mode: forwards;
  animation-name: col_hide_anim;
  animation-duration: 1s;
}

@-webkit-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes col_hide_anim {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <theader>
    <tr>
      <th>Name</th>
      <th class='hide-col'>Age</th>
      <th>Country</th>
    </tr>
  </theader>
  <tbody>
    <tr>
      <td>Name</td>
      <td class='hide-col'>Age</td>
      <td>Country</td>
    </tr>
  </tbody>
</table>

<button>Switch - Hide Age column with fadeout animation and display none after</button>



你可以简单地使用css 可见性:hidden/visible而不是显示:none/block


div {
    visibility:hidden;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
}

parent:hover > div {
    opacity: 1;
    visibility: visible;
}

其它参考22


你也可以用这个:


.dropdown {
height: 0px;
width: 0px;
opacity: .0;
color: white;
}
.dropdown:hover {
height: 20px;
width: 50px;
opacity: 1;
transition: opacity 200ms;
/* Safari */
-webkit-transition: opacity 200ms;
}

其它参考23


你可以使用你想要的自然方式 - 使用显示 - 但是你必须使用JS来限制浏览器以使其工作,或者正如其他人已经建议在另一个标签中使用一个标签的奇特技巧。我不关心内部标签,因为它进一步使CSS和尺寸复杂化,所以这里是JS解决方案:


https://jsfiddle.net/b9chris/hweyecu4/1/[136]


从以下框开始:


<div class="box hidden">Lorem</div>


一个隐藏的盒子。您可以点击进行转换:


function toggleTransition() {
  var el = $("div.box1");

  if (el.length) {
    el[0].className = "box";
    el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {    
        el[0].className = "box hidden";
    });
  } else {
    el = $("div.box");
    el[0].className = "box";
    el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {    
        el[0].className = "box box1";
    });
  }

  return el;
}

someTag.click(toggleTransition);


CSS就是你猜的:


.hidden {
  display: none;
}
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 20px;
    top: 20px;
    position: absolute;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scale(.2);
    transform: scale(.2);
  -webkit-transition: transform 2s;
  transition: transform 2s;
}
.box1{
    -webkit-transform: scale(1);
    transform: scale(1);
}


关键是限制显示属性。通过删除隐藏的类然后等待50ms,然后通过添加的类开始转换,我们让它出现然后像我们想要的那样展开,而不是只是在没有任何动画的情况下闪烁到屏幕上。类似的情况发生在另一种方式,除了我们等到动画结束之前应用隐藏。


注意:我在这里滥用.animate(maxWidth)以避免setTimeout竞争条件。setTimeout很快就会在您或其他人不知道它的时候引入隐藏的错误。.animate()很容易被.stop()杀死。我只是用它在标准的fx队列上放置50ms或2000ms的延迟,在其上很容易找到/解决其他编码器。

其它参考24


它可以通过使用转换定时功能step-endstep-start来处理


例如:https://jsfiddle.net/y72h8Lky/[137]




$(".run").on("click", function() {
    $(".popup").addClass("show");
});
$(".popup").on("click", function() {
    $(".popup").removeClass("show");
})

.popup {
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1450;
    background-color: rgba(0, 175, 236, 0.6);
    transition: opacity 0.3s ease-out, top 0.3s step-end;
}
.popup.show {
    transition: opacity 0.3s ease-out, top 0.3s step-start;
    opacity: 1;
    top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup"></div>
<button class="run" style="font-size: 24px;">Click on me</button>



我开始了一个名为切换显示动画的开源骨架项目


https://marcnewton.github.io/Toggle-Display-Animate/[138]


这个骨架帮助器将允许您轻松模仿jQuery显示/隐藏,但使用输入/输出CSS3过渡动画。


它使用类切换,因此您可以在除display:none | block | table | inline等之外的元素上使用您想要的任何css方法,以及可以想到的其他替代用法。


它的主要设计目的是用于元素切换状态,它支持一个恢复状态,其中隐藏对象允许您反向运行关键帧或播放替代动画以隐藏元素。


我正在研究的概念的大多数标记是CSS,实际使用的javascript非常少。


这里有一个演示:http://marcnewton.co.uk/projects/toggle-display-animate/[139]

其它参考25


有一个替代解决方案,css动画用于下拉隐藏:


.dropdown{   
  position: relative;
  width: 100%;
 -webkit-animation-name: animatetop;
 -webkit-animation-duration: 0.4s;
 animation-name: animatetop;
 animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
 from {top:-300px; opacity:0} 
 to {top:0; opacity:1}
}

@keyframes animatetop {
 from {top:-300px; opacity:0}
 to {top:0; opacity:1}
}