well, my problem is in the title. I need help to stop all @keyframes by hovering one of main-section__*. Im already exhausted, I have to go to study in a couple of hours, and I spent the whole night behind this code. help me please :(((.
( how to post it, how many details I have to describe in order to post on the site ).
In this case main-section__title hold itself a title of the site, next 8 div's are look like circles with their thematic icon.
On any of my methods, the maximum result that I can achieve is to stop the animation on only one of the 8 circles.
HTML:
<div >
<div >
<div >Resume</div>
<div ><i aria-hidden="true"></i></div>
<div ><i aria-hidden="true"></i></div>
<div ><i aria-hidden="true"></i></div>
<div ><i aria-hidden="true"></i></div>
<div ><i aria-hidden="true"></i></div>
<div ><i aria-hidden="true"></i></div>
<div ><i aria-hidden="true"></i></div>
<div ><i aria-hidden="true"></i></div>
</div>
</div>
SCSS:
.main-section {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($color: #bde0fe, $alpha: 0.2);
&__title {
font-size: 36px;
font-weight: 700;
text-transform: uppercase;
color: #a2d2ff;
}
&__about-me {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-250px);
animation: 30s linear 0s infinite normal $animation-play main-section-about-me;
@keyframes main-section-about-me {
0% {
transform: rotate(0deg) translateY(-250px);
}
100% {
transform: rotate(360deg) translateY(-250px);
}
}
i {
position: absolute;
top: 20.5%;
left: 21%;
}
&:hover {
@for $elem from 1 through 10 {
.anim-stop:nth-child(#{$elem}) {
animation-play-state: paused;
}
}
}
}
&__skills {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(45deg) translateY(-250px);
animation: 30s linear 0s infinite normal $animation-play main-section-skills;
@keyframes main-section-skills {
0% {
transform: rotate(45deg) translateY(-250px);
}
100% {
transform: rotate(405deg) translateY(-250px);
}
}
i {
position: absolute;
top: 20%;
left: 16%;
}
}
&__contacts {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-380px);
animation: 30s linear 0s infinite normal $animation-play main-section-contacts;
@keyframes main-section-contacts {
0% {
transform: rotate(90deg) translateY(-250px);
}
100% {
transform: rotate(450deg) translateY(-250px);
}
}
i {
position: absolute;
top: 22.5%;
left: 27.5%;
}
}
&__languages {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-380px);
animation: 30s linear 0s infinite normal $animation-play main-section-languages;
@keyframes main-section-languages {
0% {
transform: rotate(135deg) translateY(-250px);
}
100% {
transform: rotate(495deg) translateY(-250px);
}
}
i {
position: absolute;
top: 23%;
left: 25%;
}
}
&__working-exp {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-380px);
animation: 30s linear 0s infinite normal $animation-play main-section-working-exp;
@keyframes main-section-working-exp {
0% {
transform: rotate(180deg) translateY(-250px);
}
100% {
transform: rotate(540deg) translateY(-250px);
}
}
i {
position: absolute;
top: 22.5%;
left: 21.25%;
}
}
&__courses {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-380px);
animation: 30s linear 0s infinite normal $animation-play main-section-courses;
@keyframes main-section-courses {
0% {
transform: rotate(225deg) translateY(-250px);
}
100% {
transform: rotate(585deg) translateY(-250px);
}
}
i {
position: absolute;
top: 21%;
left: 25%;
}
}
&__post {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-380px);
animation: 30s linear 0s infinite normal $animation-play main-section-post;
@keyframes main-section-post {
0% {
transform: rotate(270deg) translateY(-250px);
}
100% {
transform: rotate(630deg) translateY(-250px);
}
}
i {
position: absolute;
top: 21%;
left: 33.5%;
}
}
&__education {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-380px);
animation: 30s linear 0s infinite normal $animation-play main-section-education;
@keyframes main-section-education {
0% {
transform: rotate(315deg) translateY(-250px);
}
100% {
transform: rotate(675deg) translateY(-250px);
}
}
i {
position: absolute;
top: 25%;
left: 13%;
}
}
}
CodePudding user response：
You can just set
.anim-stop{
animation-play-state: paused;}
Then toggle the class using the onm ouseover event:
<div onm ouseover="myToggleFunction()" >
CodePudding user response：
Answer was right before my eyes - it is JS. But if someone can tell me how to make this feature only on css, please take my thanks. i would like to know if it possible