I'm attempting to generate a rotating circle using css keyframes, but I'm encountering challenges in making it work with Sass.
Here is the HTML code snippet:
<div class="content">
<h1 class="h1">Experimenting with keyframes</h1>
<div class="circle"></div>
</div>
And this is the corresponding Sass code:
.content{
display:block;
position: relative;
box-sizing:border-box;
.circle{
width: 220px;
height: 220px;
border-radius: 50%;
padding: 10px;
border-top: 2px solid $pink;
border-right: 2px solid $pink;
border-bottom: 2px solid $pink;
border-left: 2px solid #fff;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
}
I rely on Prepros for compiling my Sass and the generated output showcases the classes inside the keyframes as follows:
@-moz-keyframes spin {
.lesson-page .content 100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
.lesson-page .content 100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
.lesson-page .content 100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}