Я пытаюсь создать анимацию, которая отображает блок, который ранее имел display: none;.
Я делаю @keyframes, но это странное движение. Мой код следующий:
РЕДАКТИРОВАТЬ:
Вы ДОЛЖНЫ расширить код из-за @media.
Я знаю, немного долго, (TL-DR), но это код, который мне нужен для достижения моей цели
@-webkit-keyframes slide-down {
0% {
opacity: 0;
-webkit-transform: translateY(100%);
min-height: 0;
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
min-height: 80px;
}
}
@-moz-keyframes slide-down {
0% {
opacity: 0;
-moz-transform: translateY(100%);
min-height: 0;
}
100% {
opacity: 1;
-moz-transform: translateY(0);
min-height: 80px;
}
}
.news-general {
transition: all 0.4s ease;
position: relative;
height: 350px;
}
.news-general .news-image {
position: relative;
}
.news-general .news-image img {
height: 350px;
width: 100%;
object-fit: cover;
object-position: center;
border-radius: 4px;
box-shadow: none;
}
.news-general .news-img-overlay {
transition: all 0.4s ease;
background-color: grey;
opacity: 0.85;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.news-general .news-info {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
margin: 30px 60px;
}
@media all and (min-width: 992px) {
.news-general .news-info {
padding-top: 130px;
transition: padding-top 0.6s ease;
}
}
@media all and (max-width: 992px) {
.news-general .news-info {
margin-left: 30px;
margin-right: 30px;
}
}
.news-general .news-date {
transition: all 0.4s ease;
margin-bottom: 10px;
color: white;
}
.news-general .news-title {
color: white;
font-size: 32px;
font-weight: 500;
margin-bottom: 15px;
overflow: hidden;
}
.news-general .news-summary {
line-height: 20px;
margin-bottom: 15px;
color: grey;
}
@media all and (max-width: 992px) {
.news-general .news-summary {
color: white;
}
}
@media all and (min-width: 992px) {
.news-general .news-summary {
display: none;
}
}
.news-general:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease;
}
.news-general:hover .news-img-overlay {
opacity: 1;
background-color: white;
transition: all 0.4s ease;
}
.news-general:hover .news-date {
color: #00FF00;
}
.news-general:hover .news-title {
margin-top: 0;
color: black;
}
.news-general:hover .news-summary {
display: block;
color: lightgrey;
-webkit-animation: slide-down 0.6s ease;
-moz-animation: slide-down 0.6s ease;
}
.news-general:hover .news-info {
padding-top: 0;
transition: padding-top 0.6s ease;
}
.news-general:hover .news-image {
transition: all 0.4s ease;
}
.news-general:hover .news-image img {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease;
}
<div class="news-general">
<div class="news-image">
<img src="https://images.unsplash.com/photo-1582759788793-81043d629dd5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="test">
<div class="news-img-overlay"></div>
</div>
<div class="news-info">
<div class="news-date">February 27th, 2020</div>
<div class="news-title">Foo Bar</div>
<div class="news-summary">Lorem ipsum dolor sit amet consectetur adipiscing elit nostra eget aptent, ligula molestie aliquam non massa hac placerat sem sed, semper urna ullamcorper morbi nullam rhoncus commodo natoque per. Molestie rutrum parturient tristique duis semper velit accumsan.</div>
</div>
</div>
Как решить эту проблему? Почему возникает эта проблема?