Question

我是CSS动画的新手，想知道是否有人可以帮助我。我有一个搜索栏，通过CSS动画在按钮点击时滑入和滑出。幻灯片工作正常，但当它滑出时它只是崩溃。我也想顺利滑出。这是我的代码。

HTML

<div class="slideright">
bunch of HTML...button and input 
</div>

CSS ANIMATION

.slideright {
    animation-name: slideright;
    -webkit-animation-name: slideright; 

    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideright {
    0% {
        transform: translateX(-100%);
    }       
    100% {
        transform: translateX(0%);
    }   
}

@-webkit-keyframes slideright {
    0% {
        -webkit-transform: translateX(-100%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
}

提前感谢您的帮助

Answer 1

您不必为此使用动画：

HTML：

<div>bunch of HTML...button and input </div>
<button>Click</button>

CSS：

div {
  transform: translateX(-100%);
  transition: transform 1s;
}
.slideright {
  transform: translateX(0);
}

JS：

$('button').click(function () {
  $('div').toggleClass('slideright')
});

CSS Animate-平滑地滑出搜索栏

1 个答案:

CODEPEN