Frage brauche hilfe bei befehl "transition"

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

momar

Neues Mitglied
11 März 2021
6
0
1
14
HTML:
<!DOCTYPE html>
<head>
<style>
.side-wrapper{
    margin: 0 auto;
    margin-top: 50px;
    width: 1100px;
    display: flex;
    flex-direction:row;
    justify-content:center;
    align-items: center;
}
.side1{
    width: 250px;
    height: 300px;
    background-image: linear-gradient(to right,#ba254c 30%,#9e58b9 70%);
    border: solid linear-gradient(to right,#ba254c 30%,#9e58b9 70%) 10px;
    border-radius: 10px;
    margin: 10px;
    transition: height 2s;
}
.side1:hover {
    height: 200px;
}

.side2{
    
    width: 300px;
    background-image: linear-gradient(to right,#9e58b9 30%,#01879e 70%);
    border: solid linear-gradient(to right,#ba254c 30%,#9e58b9 70%) 10px;
    border-radius: 10px;
    height: 360px;
    transition: 2s;
 }
 
 .side2:hover {
    transition: scale(1.1);
    margin-left: 30px;
    margin-right: 30px;
}

.side3{
    width: 250px;
    height: 300px;
    background-image: linear-gradient(to right,#ba254c 30%,#9e58b9 70%);
    border: solid linear-gradient(to right,#ba254c 30%,#9e58b9 70%) 10px;
    border-radius: 10px;
    margin: 10px;
    transition: height 2s;
}
.side3:hover{
    height: 200px;
}
</style>
</head>
<body>
<div class="side-wrapper">
            <div class="side1">
            </div>
            <div class="side2">
            </div>
            <div class="side3">
            </div>
        </div>
</body>

--Das ist mein Code. Ich will, dass er die translate-aktionen 1. gleichzeitig und 2. automatisch (ohne mouseover) macht. Ist das möglich?
--Vielen Dank schonmal!
 
Werbung:
Werbung: