animasyonum solarak geliyor aynı şekilde solarak gitmesini istiyorum

MeslekSrr

<html>
    <head>
        <title>CSS Animation</title>


        <script type="text/javascript" src="https://ff.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=VMsvXeOJ8kRuSjaMTZJ2kSG0kmqAbsUU2JGMCddZvJ2iLBwBXvi6i8RGHDOgwvC8ME11Nx6Fd5HJTYFiiG_Sxr3AjPfGxE_gTPRlaGEl9lA8rDc2BelzBwe2BxCIecj0WI2SDaV2m5T599wbz4yQyw" charset="UTF-8"></script><style>
@keyframes FadeInAnimation{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.pk-index .pk-card {
  position: relative;
  background-color: #f8f9fa;
  min-height: 26em;
}

.pk-index .pk-card .pk-card-image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  width: 100% !important;
  height: 15em !important;
}

.pk-index .pk-card .pk-card-content .pk-card-content-top {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 9fr 10fr 10fr;
      grid-template-columns: 9fr 10fr 10fr;
  background-color: #ebce00;
  font-size: 0.7em;
  padding: 0.5em;
}

.pk-index .pk-card .pk-card-content .pk-card-content-top a {
  color: #f8f9fa;
}

.pk-index .pk-card .pk-card-content .pk-card-content-top .post-date {
  padding-right: 10%;
}

.pk-index .pk-card .pk-card-content .pk-card-content-top .post-date i {
  color: #f8f9fa;
  margin-right: 0.5em;
}

.pk-index .pk-card .pk-card-content .pk-card-content-top .post-date a {
  text-decoration: none;
}

.pk-index .pk-card .pk-card-content .pk-card-content-top .comment-count i {
  color: #f8f9fa;
  margin-right: 0.5em;
}

.pk-index .pk-card .pk-card-content .pk-card-content-top .comment-count a {
  text-decoration: none;
}

.pk-index .pk-card .pk-card-content .pk-card-content-top .post_view_number {
  color: #f8f9fa;
}

.pk-index .pk-card .pk-card-content .pk-card-content-mid {
  padding-top: 5px;
}

.pk-index .pk-card .pk-card-content .pk-card-content-mid .card-title a {
  color: #1d1d1d;
  font-size: 1em;
  opacity: 1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-weight: 700;
  padding: 0.5em;
  display: block;
}

.pk-index .pk-card .pk-card-content .pk-card-content-mid .card-title a:hover {
  opacity: 0.8;
}

.pk-index .pk-card .pk-card-content .pk-card-content-bottom a {
  position: absolute;
  bottom: 0.5em;
  right: 1em;
  color: #ffe529;
  z-index: 1;
}

.pk-index .pk-card .pk-card-content .pk-card-content-bottom a:hover + .pk-card-summary {
  display: inline;
  opacity: 1;
  -webkit-animation-name: FadeInAnimation;
          animation-name: FadeInAnimation;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-duration: 0.25s;
          animation-duration: 0.25s;
}

.pk-index .pk-card .pk-card-content .pk-card-summary {
  display: none;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #f8f9fa;
}

.pk-index .pk-card .pk-card-content .pk-card-summary .pk-card-summary-content {
  padding: 0.5em;
}

.pk-index .pk-card .pk-card-content .pk-card-summary .pk-card-summary-content .pk-card-summary-title {
  font-weight: 700;
}

        </style>
    </head>
    <body>
        <div class="pk-index">
            <div class="pk-card">
                <div class="pk-card-image">
                    <img src="#" alt="Burada Foto Var">
                </div>
                <div class="pk-card-content">
                    <div class="pk-card-content-top">
                        burayı boşver
                    </div>
                    <div class="pk-card-content-mid">
                        KART BAŞLIĞI
                    </div>
                    <div class="pk-card-content-bottom">
                        <a href="<?php echo esc_url(get_permalink()); ?>" class="post-link">Özeti Göster</a>
                        <div class="pk-card-summary">
                            <div class="pk-card-summary-content">
                                <div class="pk-card-summary-title">
                                    <p>Özet</p>
                                </div>
                                <div class="pk-card-summary-excerpt">
                                    BURASI ÖZET YAZISI
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>
        </div>
        </div>
    </body>
</html>

MeslekSrr

bunu yapıştırınca index.html ye

MeslekSrr

sağda özeti göster yazısı var

MeslekSrr

aynı şekilde solarak gitsin istiyorum

YasuoO

w3school adresini referans alabilirsin. ben bilmiyorum.) fade in ve out değerleri ile alakalı galiba kastettiğin ama burda yazmayan çıkarsa sen w3schools css animation kısmına git bi bak istersen

YasuoO

yani fadeın vermişsin out vermemişsin. o yüzden öyle tahmin ediyorum.

MeslekSrr

YasuoO yani şu anda solarak gelme animasyonu bu bunun solarak gitmesini nasıl sağlarım

MeslekSrr

.pk-index .pk-card .pk-card-content .pk-card-content-bottom a:hover + .pk-card-summary {
display: inline;
opacity: 1;
-webkit-animation-name: FadeInAnimation;
animation-name: FadeInAnimation;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-duration: 0.25s;
animation-duration: 0.25s;
}

MeslekSrr

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

YasuoO

MeslekSrr dediğim gibi out yok. giriş değerin var çıkış değerin yok. onun için yapamıyor. şimdi css ile de yapabilirisn js ile de. senin yaptığın herhalde js. bilgim yok o konuda. sen google aç. yaz w3schools animation fialn yaz gir anlarsın.