In my project, when the homepage is opened, it should run a CSS animation so that the cube's faces open. After the animation is complete the faces should be like in the picture (I need to have a result like the first opening in the picture).
This is my code,
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
-webkit-animation: sk-foldCubeAngle 2.4s 0.5 linear both;
animation: sk-foldCubeAngle 2.4s 0.5 linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.sk-folding-cube .sk-cube5:before {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.sk-folding-cube .sk-cube6:before {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
#keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
<html>
<head>
<link href="style.css" rel="stylesheet">
<title>Open Cube</title>
<h1>Apertura Cubo</h1>
</head>
<body>
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</body>
</html>
How can I do this?
Judging by the description, snippet and the picture provided in question it seems like you are trying to create a flat cube opening animation where each face of the cube opens one by one and ends up with the appearance as shown in the first sample within the picture.
It might be possible to achieve that effect by enhancing your current code but I found it a bit confusing and so went with my own version of a flat-cube.
Explanation:
First create a cube with six faces (one div element for each face). I've made the front face as a child element of the left face element because the front face should eventually get opened on the left hand side of the left face.
Each face is a 50 x 50px square whose transform and transform-origin properties are set in such a way that it creates a cube.
Opening animation is then attached to each of the faces and a delay is added depending on when each face should get opened. In the demo, the right face gets opened first and so it has no delay, the bottom face is opened second and so it has a delay of 1s (equal to the animation time of right face), the top face is opened third and so has a delay of 2s (equal to combined animation time of the previous two faces) and so on.
The back face doesn't have any animation attached because it doesn't need to open at all ;)
.cube {
position: relative;
margin: 100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
height: 50px;
width: 50px;
transform-style: preserve-3d;
}
.back {
background: rebeccapurple;
}
.right {
background: tomato;
transform: rotateY(90deg);
transform-origin: right;
animation: open-y 1s ease-in-out forwards;
}
.bottom {
background: crimson;
transform: rotateX(270deg);
transform-origin: bottom;
animation: open-x 1s 1s ease-in-out forwards;
}
.top {
background: indianred;
transform: rotateX(90deg);
transform-origin: top;
animation: open-x 1s 2s ease-in-out forwards;
}
.left {
background: yellowgreen;
transform: rotateY(270deg);
transform-origin: left;
animation: open-y 1s 3s ease-in-out forwards;
}
.front {
background: chocolate;
transform: rotateY(270deg);
transform-origin: right;
animation: open-y 1s 3s ease-in-out forwards;
}
#keyframes open-y {
to {
transform: rotateY(180deg);
}
}
#keyframes open-x {
to {
transform: rotateX(180deg);
}
}
<div class="cube">
<div class="back"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="top"></div>
<div class="left">
<div class="front"></div>
</div>
</div>
Note: It is very much possible to achieve a similar effect in other ways also and in addition make them look a lot more realistic but that would most likely involve a good amount of translate transforms, extra keyframe settings for the animations etc - in short, a lot more complex code.
Related
I'm trying to create an animation for a three-letter word. For now, take the word XYZ. The idea is that each letter of XYZ will move in a circular path of different radii and directions (Like one letter moving right, another left, and bottom) before coming back to the original position. I have tried using different forms of code for this but am failing because I don't clearly understand how to animate circular motion with a fixed origin. Will be helpful if anyone could share how to do this. I am also attaching part of my code
.animation-container {
display: flex;
position: relative;
top: 10rem;
left: 50%;
align-items: center;
text-align: center;
}
.letter {
animation: move-letter 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
#keyframes move-letter {
from {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
<div class="animation-container">
<div class="letter X">X</div>
<div class="letter Y">Y</div>
<div class="letter Z">Z</div>
</div>
It depends what you actually want, but you definitely need three different animations (i.e. with different settings), and 3 or more stages per animation, returning to the first position in each case:
.animation-container {
display: flex;
position: relative;
top: 10rem;
left: 50%;
align-items: center;
text-align: center;
}
.letter.X {
animation: move-letter_x 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
.letter.Y {
animation: move-letter_y 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
.letter.Z {
animation: move-letter_z 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
#keyframes move-letter_x {
0% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg);
}
100% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
}
#keyframes move-letter_y {
0% {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
50% {
-webkit-transform: rotate(0deg) translateX(80px) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
#keyframes move-letter_z {
0% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg) translateX(140px) rotate(-360deg);
}
100% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
}
<div class="animation-container">
<div class="letter X">X</div>
<div class="letter Y">Y</div>
<div class="letter Z">Z</div>
</div>
Most e-learning developers are familiar with the Storyline loader.
Here is the loader:
There's nothing wrong with the loader but I want to replace it with my own CSS loader animation!
Now I want to know how to add My Loader Animation CSS Code to Storyline's CSS Code.
In other words, I want to add My Loader Animation CSS to Storyline's CSS Code.
Here is My Loader Animation CSS Code:
<div class="lds-css ng-scope"><div style="width:100%;height:100%" class="lds-ellipsis"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div><style type="text/css">#keyframes lds-ellipsis3 {
0%, 25% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
left: 100px;
}
100% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes lds-ellipsis3 {
0%, 25% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
left: 100px;
}
100% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes lds-ellipsis2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
#-webkit-keyframes lds-ellipsis2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
#keyframes lds-ellipsis {
0% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
left: 100px;
}
75% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
left: 168px;
-webkit-transform: scale(0);
transform: scale(0);
}
}
#-webkit-keyframes lds-ellipsis {
0% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
left: 100px;
}
75% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
left: 168px;
-webkit-transform: scale(0);
transform: scale(0);
}
}
.lds-ellipsis {
position: relative;
}
.lds-ellipsis > div {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
}
.lds-ellipsis div > div {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f00;
position: absolute;
top: 100px;
left: 32px;
-webkit-animation: lds-ellipsis 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
animation: lds-ellipsis 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
}
.lds-ellipsis div:nth-child(1) div {
-webkit-animation: lds-ellipsis2 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
animation: lds-ellipsis2 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
background: #1875e5;
}
.lds-ellipsis div:nth-child(2) div {
-webkit-animation-delay: -5s;
animation-delay: -5s;
background: #499255;
}
.lds-ellipsis div:nth-child(3) div {
-webkit-animation-delay: -2.5s;
animation-delay: -2.5s;
background: #f2b736;
}
.lds-ellipsis div:nth-child(4) div {
-webkit-animation-delay: 0s;
animation-delay: 0s;
background: #c5523f;
}
.lds-ellipsis div:nth-child(5) div {
-webkit-animation: lds-ellipsis3 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
animation: lds-ellipsis3 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
background: #1875e5;
}
.lds-ellipsis {
width: 200px !important;
height: 200px !important;
-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}
</style></div>
And here is the Storyline's CSS Code:
<style rel="stylesheet" data-noprefix>.slide-loader{position:absolute;pointer-events:none;left:50%;top:50%;width:500px;height:500px;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);z-index:10000;background:transparent url("loader.gif") no-repeat center center}.mobile-chrome-warning{position:fixed;width:300px;height:75px;bottom:0px;background:rgba(0,0,0,0.0001);display:none;pointer-events:none;z-index:99}.mobile-chrome-warning-btn{position:absolute;left:-16px;top:-15px;width:107px;height:107px;background:rgba(0,0,0,0.6);border-radius:50%;border:1px solid rgba(255,255,255,0.2);pointer-events:all;-webkit-transform:scale(0.6)}.mobile-chrome-warning-btn svg{position:absolute;left:60%;top:58%;-webkit-transform:translate(-50%, -50%)}.mobile-chrome-warning-bubble{position:relative;color:white;padding:10px;background:rgba(0,0,0,0.8);border-radius:5px;float:left;margin-left:100px;margin-top:15px;pointer-events:none}.mobile-chrome-warning-bubble:before{position:absolute;top:8.5px;left:-20px;width:30px;height:30px;content:'';display:block;width:0;height:0;border-style:solid;border-width:12.5px 20px 12.5px 0;border-color:transparent rgba(0,0,0,0.8) transparent transparent;pointer-events:none}.is-mobile .swipe-resume-arrow{position:fixed;top:30%;left:50%;-webkit-transform:translate(-50%, 0);width:12%}.is-mobile .mobile-chrome-warning-text{position:fixed;top:56%;left:50%;-webkit-transform:translate(-50%, 0);height:30%;width:80%;line-height:43px;text-align:center;color:#aeb7bd;word-break:break-word;font-size:20px}.slide-loader .mobile-loader-dot{display:none}#-ms-keyframes spin{from{-ms-transform:translate(-50%, -50%) rotate(0deg)}to{-ms-transform:translate(-50%, -50%) rotate(360deg)}}#-moz-keyframes spin{from{-moz-transform:translate(-50%, -50%) rotate(0deg)}to{-moz-transform:translate(-50%, -50%) rotate(360deg)}}#-webkit-keyframes spin{from{-webkit-transform:translate(-50%, -50%) rotate(0deg)}to{-webkit-transform:translate(-50%, -50%) rotate(360deg)}}#keyframes spin{from{transform:translate(-50%, -50%) rotate(0deg)}to{transform:translate(-50%, -50%) rotate(360deg)}}body.is-mobile{background:black !important}body.is-theme-unified{background:#1b1a1a}.is-mobile .load-container,.is-theme-unified .load-container{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1;visibility:visible;-webkit-transition:visibility 250ms, opacity 250ms linear;-moz-transition:visibility 250ms, opacity 250ms linear;-mz-transition:visibility 250ms, opacity 250ms linear;transition:visibility 250ms, opacity 250ms linear;pointer-events:none}.is-mobile .hide-slide-loader .load-container,.is-theme-unified .hide-slide-loader .load-container{opacity:0;visibility:hidden}.is-mobile .slide-loader,.is-theme-unified .slide-loader{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;background:none;text-align:center;width:120px;height:80px;top:60%}.is-theme-unified .slide-loader{top:50%}.is-mobile .slide-loader .mobile-loader-dot,.is-theme-unified .slide-loader .mobile-loader-dot{width:30px;height:30px;background-color:white;border-radius:100%;display:inline-block;-webkit-animation:slide-loader 1s ease-in-out 0s infinite both;-moz-animation:slide-loader 1s ease-in-out 0s infinite both;-ms-animation:slide-loader 1s ease-in-out 0s infinite both;animation:slide-loader 1s ease-in-out 0s infinite both}.is-mobile .slide-loader .dot1,.is-theme-unified .slide-loader .dot1{-webkit-animation-delay:-0.2s;-moz-animation-delay:-0.2s;-ms-animation-delay:-0.2s;animation-delay:-0.2s}.is-mobile .slide-loader .dot2,.is-theme-unified .slide-loader .dot2{-webkit-animation-delay:-0.1s;-moz-animation-delay:-0.1s;-ms-animation-delay:-0.1s;animation-delay:-0.1s}#-ms-keyframes slide-loader{0%,80%,100%{-ms-transform:scale(0.6)}40%{-ms-transform:scale(0)}}#-moz-keyframes slide-loader{0%,80%,100%{-moz-transform:scale(0.6)}40%{-moz-transform:scale(0)}}#-webkit-keyframes slide-loader{0%,80%,100%{-webkit-transform:scale(0.6)}40%{-webkit-transform:scale(0)}}#keyframes slide-loader{0%,80%,100%{transform:scale(0.6)}40%{transform:scale(0)}}.mobile-load-title-overlay{display:none}.is-mobile .mobile-load-title-overlay,.is-touchable .mobile-load-title-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;pointer-events:none}.is-mobile .mobile-load-title-overlay .mobile-load-title,.is-touchable .mobile-load-title-overlay .mobile-load-title{position:relative;height:30%;width:80%;margin:0 auto;line-height:43px;text-align:center;color:#aeb7bd;word-break:break-word}#media only screen and (min-width: 320px) and (orientation: landscape){.is-mobile .mobile-load-title,.is-touchable .mobile-load-title{font-size:28.8px;-moz-transform:translateY(33%);-ms-transform:translateY(33%);-webkit-transform:translateY(33%);transform:translateY(33%)}}#media only screen and (min-width: 320px) and (orientation: portrait){.is-mobile .slide-loader,.is-touchable .slide-loader{top:55%}.is-mobile .mobile-load-title,.is-touchable .mobile-load-title{font-size:28.8px;-moz-transform:translateY(35%);-ms-transform:translateY(35%);-webkit-transform:translateY(35%);transform:translateY(35%)}}
</style>
Every and any attempts to make it work was a complete failure for me.
Any advice is extremely appreciated.
It's great being able to change the animation. Here’s how for the HTML5 version.
I've done it with Storyline 360, and this method is reported to work in Storyline 3 too.
Publish your course and navigate to the folder that you published to.
Copy your chosen animation into this folder, making note of the filename. Optionally, place the animation within a subfolder.
Open the story_html5.html file in a text editor.
Relatively close to the top you will find:
url("data:image/svg+xml;base64
Delete data:image and the many lines following. You'll stop right before this part:
")
Now type the relative path and filename between the quotes you have left. So, now it looks like
url("folder/image.gif")
If your loader image is not exactly 100x100, then you will edit the width and height of your new animated image. If you look at the lines above where you just edited, you'll find the spot. The code looks like
width:100px;height:100px;
If your loader image is a spinning type, then you’re done. If it’s not a spinning type, you need to remove the sections of code that have “spin” in them, or your animation will also spin. Make sure you remove a whole section in between the semicolons, plus one semicolon. Don’t leave extra semicolons and don’t remove too many.
Source: Melissa Milloway’s tutorial
In my project, when the homepage is opened, it should run a CSS animation so that the cube's faces open. After the animation is complete the faces should be like in the picture (I need to have a result like the first opening in the picture).
This is my code,
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
-webkit-animation: sk-foldCubeAngle 2.4s 0.5 linear both;
animation: sk-foldCubeAngle 2.4s 0.5 linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.sk-folding-cube .sk-cube5:before {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.sk-folding-cube .sk-cube6:before {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
#keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
<html>
<head>
<link href="style.css" rel="stylesheet">
<title>Open Cube</title>
<h1>Apertura Cubo</h1>
</head>
<body>
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</body>
</html>
How can I do this?
Judging by the description, snippet and the picture provided in question it seems like you are trying to create a flat cube opening animation where each face of the cube opens one by one and ends up with the appearance as shown in the first sample within the picture.
It might be possible to achieve that effect by enhancing your current code but I found it a bit confusing and so went with my own version of a flat-cube.
Explanation:
First create a cube with six faces (one div element for each face). I've made the front face as a child element of the left face element because the front face should eventually get opened on the left hand side of the left face.
Each face is a 50 x 50px square whose transform and transform-origin properties are set in such a way that it creates a cube.
Opening animation is then attached to each of the faces and a delay is added depending on when each face should get opened. In the demo, the right face gets opened first and so it has no delay, the bottom face is opened second and so it has a delay of 1s (equal to the animation time of right face), the top face is opened third and so has a delay of 2s (equal to combined animation time of the previous two faces) and so on.
The back face doesn't have any animation attached because it doesn't need to open at all ;)
.cube {
position: relative;
margin: 100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
height: 50px;
width: 50px;
transform-style: preserve-3d;
}
.back {
background: rebeccapurple;
}
.right {
background: tomato;
transform: rotateY(90deg);
transform-origin: right;
animation: open-y 1s ease-in-out forwards;
}
.bottom {
background: crimson;
transform: rotateX(270deg);
transform-origin: bottom;
animation: open-x 1s 1s ease-in-out forwards;
}
.top {
background: indianred;
transform: rotateX(90deg);
transform-origin: top;
animation: open-x 1s 2s ease-in-out forwards;
}
.left {
background: yellowgreen;
transform: rotateY(270deg);
transform-origin: left;
animation: open-y 1s 3s ease-in-out forwards;
}
.front {
background: chocolate;
transform: rotateY(270deg);
transform-origin: right;
animation: open-y 1s 3s ease-in-out forwards;
}
#keyframes open-y {
to {
transform: rotateY(180deg);
}
}
#keyframes open-x {
to {
transform: rotateX(180deg);
}
}
<div class="cube">
<div class="back"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="top"></div>
<div class="left">
<div class="front"></div>
</div>
</div>
Note: It is very much possible to achieve a similar effect in other ways also and in addition make them look a lot more realistic but that would most likely involve a good amount of translate transforms, extra keyframe settings for the animations etc - in short, a lot more complex code.
I'm trying to create a folding effect in a hexagon composed of triangles. So far I've only managed to make the triangles translate instead of folding over. I want to make
this http://jsfiddle.net/zn6jbhr6/
Relevant SCSS
#mixin hexTranslateKeyFrames($name, $degree) {
#keyframes #{$name} {
#content;
}
}
$hex-degree: 0deg;
#for $idx from 1 through 6 {
$hex-degree: $hex-degree + 60;
#include hexTranslateKeyFrames(hexTranslate#{$idx}, $hex-degree) {
0% { transform: rotateZ(0deg) rotate($hex-degree); }
54.55%, 100% { transform: rotateZ(360deg) rotate($hex-degree); }
}
}
$order2: (0s, 0.2s, 0.4s, 0.6s, 0.8s, 1s);
.folding-hex {
#include hexagon();
#for $i from 1 through 6 {
.triangle:nth-child(#{$i}) {
animation: hexTranslate#{$i} 2.2s infinite #{nth($order2, $i)} linear;
}
}
}
more like this http://jsfiddle.net/wvm15yL4/
Relevant CSS
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #333;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
#-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
} 25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
} 90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
#keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
} 25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
} 90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
You need to create an animation that rotates in 3D.
Since it is a little hard, I have done it only once, and reused it for the other elements setting an intermediate element in the DOM that does the rotation in the plane
The first 2 parameters in the rotate3D are sin(60deg) and cos(60deg), to make the rotation axis be at 60 deg
#keyframes flip {
0% { transform: rotate3d( 0.5, 0.866, 0, 90deg);
opacity: 0;}
0.1% { transform: rotate3d( 0.5, 0.866, 0, 90deg);
opacity: 1;}
14% { transform: rotate3d( 0.5, 0.866, 0, 0deg); }
50% { transform: rotate3d(-0.5, 0.866, 0, 0deg); }
63.99% { transform: rotate3d(-0.5, 0.866, 0, -90deg);
opacity: 1;}
64%, 100% { transform: rotate3d(-0.5, 0.866, 0, -90deg);
opacity: 0}
}
.folding-hex {
height: 69.28px;
width: 80px;
position: relative;
margin: 0 auto;
transform-origin: 0 0;
transform: translateX(40px) rotate(30deg); }
.rotator {
transform-origin: 20px 37.64px;
}
.rotator:nth-child(1) {
transform: rotate(0deg);
}
.rotator:nth-child(2) {
transform: rotate(60deg);
}
.rotator:nth-child(3) {
transform: rotate(120deg);
}
.rotator:nth-child(4) {
transform: rotate(180deg);
}
.rotator:nth-child(5) {
transform: rotate(240deg);
}
.rotator:nth-child(6) {
transform: rotate(300deg);
}
.triangle {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 34.64px 20px 0;
transform-origin: 20px 37.64px;
border-color: #E50C4E transparent;
animation: flip 3s linear infinite;
}
.rotator:nth-child(2) .triangle {
border-color: #b5093d transparent;
animation-delay: -2.5s;
}
.rotator:nth-child(3) .triangle {
border-color: #b5093d transparent;
animation-delay: -2.0s;
}
.rotator:nth-child(4) .triangle {
animation-delay: -1.5s;
}
.rotator:nth-child(5) .triangle {
border-color: #f8799f transparent;
animation-delay: -1.0s;
}
.rotator:nth-child(6) .triangle {
border-color: #f8799f transparent;
animation-delay: -0.5s;
}
<div class="folding-hex">
<div class="rotator">
<div class="triangle"></div>
</div>
<div class="rotator">
<div class="triangle"></div>
</div>
<div class="rotator">
<div class="triangle"></div>
</div>
<div class="rotator">
<div class="triangle"></div>
</div>
<div class="rotator">
<div class="triangle"></div>
</div>
<div class="rotator">
<div class="triangle"></div>
</div>
</div>
I somehow manage to create this. I created a cube, that rotate horizontally, when it is hovered, but i want it to stay at its current location when it is not hovered. Ive been searching this for awhile now, but I cant seem to find the answer.
<html>
<style>
.wrap {
-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
-moz-perspective-origin: 50% 100px;
-webkit-perspective-origin: 50% 100px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
margin: 0 auto;
margin-top: 30px;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
-moz-transform: translateZ(-100px) rotateY(180deg);
background: orange;
opacity: 0.5;
}
.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
-moz-transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
background: yellow;
opacity: 0.5;
}
.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
-moz-transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
background: violet;
opacity: 0.5;
}
.top {
-moz-transform: rotateX(-90deg) translateY(-100px);
-webkit-transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
background: green;
opacity: 0.5;
}
.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
-moz-transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
background: blue;
opacity: 0.5;
}
.front {
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
background: red;
opacity: 0.5;
}
#-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }
}
.cube:hover {
animation: spin 5s infinite linear;
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
}
</style>
<body>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div
</body>
</html>
Anynone can point me to the right direction? thank you very much,
You can set the animation for all states of .cube, and just toggle animation-play-state on hovering (see JSFiddle):
.cube {
/* other styles... */
-webkit-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/* other rules... */
.cube:hover {
-webkit-animation-play-state: running;
animation-play-state: running;
}
Also, I suppose that now there is no much need to specify -moz-properties for transforms and animations because Firefox supports them unprefixed since version 16 (it's 7 versions back!).
Following CSS will call in case of mouse hover, as there is no spinning animation within this, it won't trigger any animation
.cube : hover {
//Do nothing
}