[CopywryterParticipant]

http://codepen.io/bojankrsmanovic/pen/LRZJVY

The CSS Looks pretty standard, but those divs didn’t play nice in a raw content box, and a few of the css lines didn’t seem to work, starting with:

%flex-center {
display: flex;
justify-content: center;
align-items: center;
}

Should I perhaps be adding the css to global and not have it be page-specific?

Yes, I can do this with the original animated gif, but it’s better this way.

[RadModerator]

Hi there,

Thanks for writing in.

That’s not a standard CSS, it’s SCSS and you’ll have SCSS processor to make it work. Try this tool http://beautifytools.com/scss-compiler.php and compile your SCSS to CSS.

There are available plugins too, like this https://wordpress.org/plugins/wp-scss/

Thanks!

[CopywryterParticipant]

Cool, thank you. This is the output from the compiler, with me changing the original “.body” to .mark

How do I lay this out in a section? classes? raw content?

.mark {
display: flex;
justify-content: center;
align-items: center;
}

*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.mark {
height: 100vh;
overflow: hidden;
}

.mark .box-wrapper {
position: relative;
margin-top: 50px;
width: 300px;
height: 284px;
animation: rotate-box 3.2s infinite;
}

.mark .box-wrapper .box-front, .mark .box-wrapper .box-back {
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 30px;
}

.mark .box-wrapper .box-front {
position: fixed;
background: #44a5f3;
overflow: hidden;
}

.mark .box-wrapper .box-front .check {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
transform: rotate(225deg);
}

.mark .box-wrapper .box-front .check::before {
content: ”;
display: block;
position: relative;
margin-top: 75px;
margin-left: 85px;
border: solid transparent;
border-right-width: 0;
border-top-width: 0;
animation: check-.mark-animation 3.2s infinite;
}

.mark .box-wrapper .box-front .check::after {
content: ”;
display: block;
position: relative;
margin-top: 0px;
margin-left: 85px;
background: rgba(0, 0, 0, 0.1);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 12%, transparent 77%, transparent 100%);
width: 198px;
height: 155px;
animation: check-m-shadow 3.2s infinite;
}

.mark .box-wrapper .box-back {
position: absolute;
background: #1977d1;
animation: move-back-box 3.2s infinite;
overflow: hidden;
z-index: -1;
}

.mark .box-wrapper .box-back::before {
content: ”;
display: block;
position: absolute;
-webkit-transform: rotate(225deg);
transform: rotate(225deg) translate(-53px, 76px);
background: rgba(0, 0, 0, 0.1);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
top: 0;
left: 0;
right: 0;
bottom: 45px;
animation: front-box-shadow 3.2s infinite;
}

@keyframes rotate-box {
0% {
transform: rotate(0) translateX(0);
width: 300px;
}

15.5% {
transform: rotate(90deg) translateX(-150px);
width: 347px;
}

18.5% {
transform: rotate(90deg) translateX(-150px);
}

22% {
transform: rotate(90deg) translateX(70px);
}

32% {
transform: rotate(90deg) translateX(0);
animation-timing-function: ease-out;
}

100% {
transform: rotate(90deg) translateX(0);
width: 347px;
}
}

@keyframes move-back-box {
0% {
transform: translate(0);
}

22% {
transform: translate(0);
}

45% {
transform: translate(-50px, -50px);
animation-timing-function: ease-out;
}

100% {
transform: translate(-50px, -50px);
}
}

@keyframes check-.mark-animation {
0% {
width: 0;
height: 0;
}

21.665% {
height: 0;
border-bottom-width: 0;
border-left-width: 0;
}

21.666% {
border-bottom-width: 30px;
border-left-width: 30px;
border-color: #fff;
height: 100px;
}

22% {
width: 0;
animation-timing-function: ease-out;
}

45% {
width: 198px;
animation-timing-function: ease-out;
}

100% {
width: 198px;
height: 100px;
border-bottom-width: 30px;
border-left-width: 30px;
border-color: #fff;
}
}

@keyframes check-m-shadow {
0% {
width: 0;
height: 0;
}

22% {
width: 0;
height: 0;
animation-timing-function: ease-out;
}

45% {
width: 198px;
height: 155px;
animation-timing-function: ease-out;
}

100% {
width: 198px;
height: 155px;
}
}

@keyframes front-box-shadow {
0% {
visibility: hidden;
}

21.9999% {
visibility: hidden;
}

22% {
visibility: visible;
}

100% {
visibility: visible;
}
}

[CopywryterParticipant]

Update: I’ve figured how to make it work, though not how to set the animation to only fire a few times.

What’s the best way to set fallbacks for this in Cornerstone?

[RadModerator]

Hi there,

You’ll have to modify this line from http://codepen.io/bojankrsmanovic/pen/LRZJVY

animation: rotate-box $a-duration infinite;

And change infinite to the count or number you wish it to repeat.

Eg. repeat 5 times

animation: rotate-box $a-duration 5;

What do you mean by fallbacks?

Thanks!

[CopywryterParticipant]

i tried changing the infinite number and that really blows things up, which was explained by the guy who created it as:

“it’s because when animation goes to 100%, after it finishes, it returns to 0% settings, and in this case .box-front is position: fixed, and for some reason, it’s not positioned relative to it’s parrent, which is .box-wrapper, but rather to body (im not sure why, really) -> this explains big blue radius box over whole screen.

Even if that works as it should, you would still have bad checkmark in the end (i assume, you want it to rotate 3x and then stay in that state forever), it can be fixed, but requires totally new animations from beginning.

My suggestion for quick solution, it can work, is to set $a-duration to some insane number, like 20000s and set keyframe animations apropo that, meaning for example: 0% {} === 0% {} 15.5% {} === .15.5% {} 18.5% {} === .18.5% {} 22% {} ===.22% {} 32% {} ===.32% {} 100%{} === 1% {} and new one 100% which is copy of 1%… I haven’t tested this, but I hope you get my point, it should complete entire animation in relatively close to 3s, but it will stay in that completed state for another 19997s. 🙂

Sorry for wall of text, I hope you got an idea. 🙂
EDIT: Don’t add prefixes yourself, since there is an option to turn on autoprefixer in CSS settings. Just use normal default animation-iteration setting (which you don’t really need, just add new variable $count: 3; and where you see infinite, change to $count.”

As for Fallbacks, I mean setting up a static fallback image for IE, because it seems to hate animations.

[RadModerator]

Hi there,

In that case, you may try what’s he suggested. Like changing the $a-duration to something like 20000s. Though I can’t really help creating the new animation to fit your new requirement, it’s like re-creating that whole feature.

About the fallback image for IE, what you could do is add a hidden image, and then display that image and hide the animated element on IE. The animated element is composed of multiple elements and animations, having a fallback image to replace that isn’t possible. Hence, controlling its visibility is the easiest way, for now.

Example,

@media screen and (min-width:0\0) {

.mark_fallback {
display: inline-block;
}

.mark {
display: none;
}

}

Thanks!

[Author]

Posts