Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple CSS animation
<div class="wrap">
<div class="container">
<h1>Rotate</h1>
<div class="box1 box"></div>
</div>
<div class="container">
<h1>Translate</h1>
<div class="boxes">
<div class="box2H box"></div>
<div class="box2 box"></div>
</div>
</div>
<div class="container">
<h1>Combination</h1>
<div class="box3 box"></div>
</div>
</div>
.wrap {
display: flex;
justify-content: space-around;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
border: 1px solid grey;
border-radius: 20px;
&:hover {
box-shadow: 5px 5px #C0C0C0;
}
}
h1{
color: grey;
}
.box {
border-radius: 2% 50%;
height: 100px;
margin: 100px;
width: 100px;
}
.box1 {
background: mediumaquamarine;
transition: all 3s ease-in-out;
&:hover {
transform: rotate(1080deg);
}
}
.boxes{
width: 100px;
height: 100px;
margin: 100px;
}
.box2 {
background: PaleTurquoise;
position: absolute;
top: 90px;
left: 570px;
z-index: -1;
}
.box2H {
background: #00aa9d;
transition: all 1s ease;
position: absolute;
top: 90px;
left: 570px;
&:hover {
transform: translate(20px, 40px)
}
}
.box3 {
background: #00aa5d;
transition: all 1s ease;
// transform-origin: left top;
&:hover {
transform: rotate(90deg) scale(1.5) translateX(-50%) translateY(50%)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.