HTML/CSS animasyon kapatma efekti nasıl verilir?

Elontidirax

Picopat
Katılım
12 Mayıs 2021
Mesajlar
603
Çözümler
1
Selam, HTML ve CSS üzerinden bi kategori butonu oluşturdum ve bu butona checked özelliği ile açılıp kapanan bir kategori menüsü ekledim, ardından animation özelliği ile açılma efekti verdim, fakat kapanma efektini nasıl vereceğimi tam olarak anlamadım.

gif.gif


Özet: kategori butonuna basınca açılma efekti ile kategori menüsü açılıyor, fakat tekrar kapatmak için tıklayınca direkt efektsiz bir şekilde kapanıyor, bunu açılmada ki gibi efektli hale nasıl çevirebilirim?

Kodlar:

[CODE lang="html" title="HTML" highlight="120"]<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&family=PT+Sans+Narrow:[email protected];700&family=Rubik&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&family=PT+Sans+Narrow:[email protected]&family=Rubik&display=swap" rel="stylesheet">


<title>Document</title>
</head>

<body>
<div class="container">
<div class="up">
<div class="uparea">
<div class="upbar">
<p class="upbartitle">Ana Sayfa</p>
</div>
<div class="middlearea">
<div class="middlebar">
<header>
<div class="slider">
<div class="slider-content">
<div class="slider-item">
<img class="image1" src="images/img1.png" alt="">
</div>
<div class="slider-item">
<img class="image1" src="images/img2.png" alt="">
</div>
<div class="slider-item">
<img class="image1" src="images/img3.png" alt="">
</div>
<div class="slider-item">
<img class="image1" src="images/img4.png" alt="">
</div>
<div class="slider-item">
<img class="image1" src="images/img5.png" alt="">
</div>
</div>
</div>
</header>
</div>
</div>
<div class="bottomarea">
<div class="bottombar">
<nav id="navbar">
<ul class="menu">
<li id="menu1">
<a href="">
<p id="menutext1">Anasayfa</p>
</a>
</li>
<li id="menu1">
<a href="">
<p id="menutext2">Diziler</p>
</a>
</li>
<li id="menu1">
<label for="categoryclick"><p id="menutext3" class="categoryclick">Kategori</p></label><input type="checkbox" id="categoryclick">
<div id="categorys">
<div id="category1">
<ul id="categorylist">
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
</ul>
</div>
<div id="category2">
<ul id="categorylist">
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
<li id="categorylist2"></li>
</ul>
</div>
</div>
</li>
<li id="menu1">
<a href="">
<p id="menutext4">Filmler</p>
</a>
</li>
<li id="menu1">
<a href="">
<p id="menutext5">Sosyal</p>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>[/CODE]

[CODE lang="css" title="CSS" highlight="300"]* {
padding: 0;
margin: 0;
z-index: 1;
}

.uparea {
margin: auto;
}

.upbar {
background-color: rgb(72, 146, 88);
width: 100%;
height: 50px;
border-top: 10px solid rgb(126, 71, 0);
border-bottom: 10px solid rgb(126, 71, 0);
margin: auto;
}

.upbartitle {
color: white;
font-family: 'Oswald', sans-serif;
font-size: 40px;
text-align: center;
margin-top: -7px;
}

.middlearea {
background-color: rgb(37, 37, 37);
width: 100%;
height: 500px;
}

.middlebar {
background-color: rgb(78, 78, 78);
width: 1000px;
height: 500px;
margin: auto;
}

.bottombar {
background-color: rgb(255, 255, 255);
width: 100%;
height: 50px;
border-top: 10px solid rgb(126, 71, 0);
border-bottom: 10px solid rgb(126, 71, 0);
margin: auto;
}

.lowerarea {
background-color: rgb(37, 37, 37);
width: 100%;
height: 2500px;
}

.lowarea {
background-color: rgb(255, 255, 255);
margin: auto;
width: 1000px;
height: 2500px;
}

{
"'alan yukarı'"----------------------------------------------------
}

.image1 {
width: 1000px;
}

.slider {
width: 1000px;
height: 500px;
position: relative;
overflow: hidden;
}

.slider-content {
position: absolute;
width: 1000%;
left: 0;
animation: slide 30s infinite;
}

.slider-item {
float: left;
}

@keyframes slide {
0% {
transform: translateX(0px);
}
10% {
transform: translateX(-1000px);
}
20% {
transform: translateX(-1000px);
}
30% {
transform: translateX(-1000px);
}
40% {
transform: translateX(-2000px);
}
50% {
transform: translateX(-2000px);
}
60% {
transform: translateX(-2000px);
}
70% {
transform: translateX(-3000px);
}
80% {
transform: translateX(-3000px);
}
90% {
transform: translateX(-3000px);
}
100% {
transform: translateX(-4000px);
}
110% {
transform: translateX(-4000px);
}
120% {
transform: translateX(-4000px);
}
130% {
transform: translateX(0px);
}
}

.slider-content:hover {
animation-play-state: paused;
}

{
"'slider alan'"----------------------------------------------------
}

ul {
list-style: none;
}

.menu {
margin-left: 325px;
}

#menu1 {
background: rgb(72, 146, 88);
height: 50px;
width: 250px;
float: left;
}

a {
text-decoration: none;
color: white;
}

#menutext1 {
position: relative;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 95px;
}

#menutext2 {
position: relative;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 102.5px;
}

#menutext3 {
position: relative;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 97.5px;
}

#menutext4 {
position: relative;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 100px;
}

#menutext5 {
position: relative;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 102.5px;
}

#menu1:hover {
background-color: rgb(64, 104, 163);
}

{
"'menu alan'"----------------------------------------------------
}

#category1 {
height: 500px;
width: 200px;
margin-right: 623px;
float: right;
position: relative;
margin-top: -558px;
border-right: 10px solid rgb(126, 71, 0);
border-left: 10px solid rgb(126, 71, 0);
animation: 0.5s cubic-bezier(.25, 1, .30, 1) wipe-in-left both;
}

#category2 {
background-color: rgb(72, 146, 88);
height: 500px;
width: 200px;
margin-left: 627px;
float: left;
margin-top: -558px;
border-right: 10px solid rgb(126, 71, 0);
border-left: 10px solid rgb(126, 71, 0);
animation: 0.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
}

#categorylist2 {
background-color: rgb(81, 180, 94);
height: 41.7px;
width: 100%;
}

#categorylist2:hover {
background-color: rgb(77, 134, 85);
}

#categoryclick {
display: none;
}

#categorys {
display: none;
}

#categoryclick:checked+#categorys {
display: block;
}

.categoryclick:hover {
cursor: pointer;
}

@keyframes wipe-in-left {
from {
clip-path: inset(0 0 0 100%);
}
to {
clip-path: inset(0 0 0 0);
}
}

[transition-style="in:wipe:left"] {
animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-left both;
}

@keyframes wipe-in-right {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}

[transition-style="in:wipe:right"] {
animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
}

@keyframes wipe-in-up {
from {
clip-path: inset(100% 0 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}

[transition-style="in:wipe:up"] {
animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-up both;

{
"'category alan'"----------------------------------------------------
}
}[/CODE]
 
Son düzenleme:

Rosalind

Centipat
Katılım
22 Şubat 2022
Mesajlar
855
Çözümler
49
Genişlik özelliğini transitionla beraber kullanabilirsiniz.

HTML:
<!DOCTYPE html>
<html>
<head>
    <style>
        .an-Animation {
            width: 0px; height: 100px;
            transition: width ease-in-out 1s;
            background-color: black;
        }
       
        .toggle-Button:checked + .an-Animation {
            width: 100px;
        }
    </style>
</head>
<body>
    <input type='checkbox' class='toggle-Button'>
    <div class='an-Animation'></div>
<body>
</html>
 
Yukarı