HTML/CSS animasyon kapatma efekti nasıl verilir?

Elontidirax · 2 Şubat 2022

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.

Ö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:wght@600&family=PT+Sans+Narrow:wght@400;700&family=Rubik&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&family=PT+Sans+Narrow:wght@700&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]

Rosalind · 23 Şubat 2022

Genişlik özelliğini transitionla beraber kullanabilirsiniz.

Edit fiddle - JSFiddle - Code Playground

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>

HTML/CSS animasyon kapatma efekti nasıl verilir?

Ayrıntılı düzenleme

Elontidirax

Picopat

Rosalind

Centipat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz