<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>css-transition</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div
class="menu"
style="
display: flex;
margin-bottom: 40px;
background-color: rgb(231, 236, 203);
"
>
<a
target="_blank"
href="https://www.w3schools.com/cssref/css3_pr_transform.php"
>transform</a
>
<a
target="_blank"
href="https://www.w3schools.com/cssref/css3_pr_transform-origin.php"
>transform-origin</a
>
<a
target="_blank"
href="https://www.w3schools.com/cssref/css_pr_translate.php"
>translate</a
>
<a
target="_blank"
href="https://www.w3schools.com/cssref/css3_pr_transition.php"
>transition</a
>
<a
target="_blank"
href="https://www.w3schools.com/cssref/css3_pr_animation.php"
>animation</a
>
</div>
<div style="display: flex">
<div class="link">
<a
href="https://programmer.aia-gess.ge/css-style/27-transition-.html"
target="_blanck"
>Site-link</a
>
</div>
<div class="box">
<h1>
ეს ბლოკი კურსორის მიტანისას შემობრუნდება, აგრეთვე ზომებს და ფერს
იცვლის
</h1>
</div>
</div>
<hr />
<div style="width: 500px; height: 500px; margin: 0 auto">
<div class="anim"></div>
</div>
</body>
</html>
.box {
padding: 30px 60px;
width: 400px;
height: 200px;
text-align: center;
color: #fff;
background-color: green;
transition: all 0.9s;
}
.box:hover {
color: red;
background-color: blue;
transform: scaleX(0.5) scaleY(0.5) rotate(180deg);
cursor: pointer;
}
a {
display: block;
margin-left: 100px;
//width: 120px;
text-decoration: none;
text-align: center;
color: #000;
font-size: 1.5em;
transition: all 0.3s;
}
a:hover {
color: red;
}
a::before {
content: "";
display: block;
width: 100%;
height: 1px;
margin-bottom: 4px;
background-color: red;
transform-origin: 100%;
transform: scaleX(0);
transition: all 0.3s;
}
a:hover::before {
transform: scaleX(1);
}
a::after {
content: "";
display: block;
width: 100%;
height: 1px;
margin-top: 4px;
background-color: red;
transform-origin: 0%;
transform: scaleX(0);
transition: all 0.3s;
}
a:hover::after {
transform: scaleX(1);
}
.link {
width: 300px;
height: 200px;
text-align: center;
padding-top: 50px;
}
.anim {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-delay: 5s;
animation-direction: reverse;
animation-direction: alternate;
}
@keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: yellow;
left: 200px;
top: 0px;
}
50% {
background-color: blue;
left: 200px;
top: 200px;
}
75% {
background-color: green;
left: 0px;
top: 200px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
