15 replies

Animation on svg icons

Hello coders.

Unfortunately I lost too much time on this, and can't figure it out.

Given the following codepen:
https://codepen.io/Ionut-Sanda/pen/ZEPjXKp?editors=1100

I want to add some floating animations on each hexagon.

The problem:
I have some transform and scale on each path individually and, if i use the following CSS code, each individual hexagon, will be moved to the

path

path

coordinates.

#Hexagon-1,
#Hexagon-2,
#Hexagon-3,
#Hexagon-4,
#Hexagon-4,
#Hexagon-5,
#Hexagon-6,
#Hexagon-7,
#Hexagon-8,
#Hexagon-9,
#Hexagon-10 {
    animation: float 1s infinite ease-in-out alternate;
}
#Hexagon-1 {
    animation-delay: 0.5s;
}
#Hexagon-2 {
    animation-delay: 0.2s;
}
#Hexagon-3 {
    animation-delay: 0.4s;
}
#Hexagon-4 {
    animation-delay: 0.6s;
}
#Hexagon-5 {
    animation-delay: 0.8s;
}
#Hexagon-6 {
    animation-delay: 0.1s;
}
#Hexagon-7 {
    animation-delay: 0.3s;
}
#Hexagon-8 {
    animation-delay: 0.5s;
}
#Hexagon-9 {
    animation-delay: 0.7s;
}
#Hexagon-10 {
    animation-delay: 0.9s;
}

#Hexagon-1,
#Hexagon-2,
#Hexagon-3,
#Hexagon-4,
#Hexagon-4,
#Hexagon-5,
#Hexagon-6,
#Hexagon-7,
#Hexagon-8,
#Hexagon-9,
#Hexagon-10 {
    animation: float 1s infinite ease-in-out alternate;
}
#Hexagon-1 {
    animation-delay: 0.5s;
}
#Hexagon-2 {
    animation-delay: 0.2s;
}
#Hexagon-3 {
    animation-delay: 0.4s;
}
#Hexagon-4 {
    animation-delay: 0.6s;
}
#Hexagon-5 {
    animation-delay: 0.8s;
}
#Hexagon-6 {
    animation-delay: 0.1s;
}
#Hexagon-7 {
    animation-delay: 0.3s;
}
#Hexagon-8 {
    animation-delay: 0.5s;
}
#Hexagon-9 {
    animation-delay: 0.7s;
}
#Hexagon-10 {
    animation-delay: 0.9s;
}

I tried multiple things, like adding the style animation to the

tag.

Anyone has any idea how can i achieve this? Unfortunately, i need to do this using only html and css.

CodePenIonut Sanda

ZEPjXKp

...

KP-C

Kevin Powell - Community•3y ago•

15 replies

KillandCry

Animation on svg icons

path

path

coordinates.

#Hexagon-1,
#Hexagon-2,
#Hexagon-3,
#Hexagon-4,
#Hexagon-4,
#Hexagon-5,
#Hexagon-6,
#Hexagon-7,
#Hexagon-8,
#Hexagon-9,
#Hexagon-10 {
    animation: float 1s infinite ease-in-out alternate;
}
#Hexagon-1 {
    animation-delay: 0.5s;
}
#Hexagon-2 {
    animation-delay: 0.2s;
}
#Hexagon-3 {
    animation-delay: 0.4s;
}
#Hexagon-4 {
    animation-delay: 0.6s;
}
#Hexagon-5 {
    animation-delay: 0.8s;
}
#Hexagon-6 {
    animation-delay: 0.1s;
}
#Hexagon-7 {
    animation-delay: 0.3s;
}
#Hexagon-8 {
    animation-delay: 0.5s;
}
#Hexagon-9 {
    animation-delay: 0.7s;
}
#Hexagon-10 {
    animation-delay: 0.9s;
}

#Hexagon-1,
#Hexagon-2,
#Hexagon-3,
#Hexagon-4,
#Hexagon-4,
#Hexagon-5,
#Hexagon-6,
#Hexagon-7,
#Hexagon-8,
#Hexagon-9,
#Hexagon-10 {
    animation: float 1s infinite ease-in-out alternate;
}
#Hexagon-1 {
    animation-delay: 0.5s;
}
#Hexagon-2 {
    animation-delay: 0.2s;
}
#Hexagon-3 {
    animation-delay: 0.4s;
}
#Hexagon-4 {
    animation-delay: 0.6s;
}
#Hexagon-5 {
    animation-delay: 0.8s;
}
#Hexagon-6 {
    animation-delay: 0.1s;
}
#Hexagon-7 {
    animation-delay: 0.3s;
}
#Hexagon-8 {
    animation-delay: 0.5s;
}
#Hexagon-9 {
    animation-delay: 0.7s;
}
#Hexagon-10 {
    animation-delay: 0.9s;
}

I tried multiple things, like adding the style animation to the

tag.

Anyone has any idea how can i achieve this? Unfortunately, i need to do this using only html and css.

CodePenIonut Sanda

ZEPjXKp

...

Animation on svg icons

Animation on svg icons

Similar Threads

Similar Threads

Similar Threads