In my website, I want to create a CSS animation where I am trying to flip multiple images one after another after 1sec delay, but it's not working. When the first images flips then second image should flip then thrid and so on
Like this but onload, Each image should flip one after another.
Suppose there are 4 Images 1st image flips with delay:0 then second image flips with delay:1 an so on till fourth Image with delay:4
javascript
document.addEventListener("DOMContentLoaded", function() {
var rotateComplete = function() {
with(target.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "";
}
target.appendChild(arr[0]);
setTimeout(function(el) {
with(el.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "rotator2";
}
}, 0, target);
};
var target = document.getElementById("rotator2");
var arr = target.getElementsByTagName("a");
target.addEventListener("webkitAnimationEnd", rotateComplete, false);
target.addEventListener("animationend", rotateComplete, false);
target.addEventListener("MSAnimationEnd", rotateComplete, false);
}, false);
#stage2 {
margin: 2em auto 1em 50%;
height: 240px;
-webkit-perspective: 1200px;
-webkit-perspective-origin: 0 50%;
-moz-perspective: 1200px;
-moz-perspective-origin: 0 50%;
-ms-perspective: 1200px;
-ms-perspective-origin: 0 50%;
}
#rotator2 a {
position: absolute;
left: -151px;
-moz-transform-style: preserve-3d;
}
#rotator2 a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
#rotator2 a:nth-child(1) img {
-webkit-transform: rotateY(-120deg) translateZ(80px);
-moz-transform: rotateY(-120deg) translateZ(80px);
-ms-transform: rotateY(-120deg) translateZ(80px);
}
#rotator2 a:nth-child(2) img {
-webkit-transform: translateZ(80px);
-moz-transform: translateZ(80px);
-ms-transform: translateZ(80px);
}
#rotator2 a:nth-child(3) img {
-webkit-transform: rotateY(120deg) translateZ(80px);
-moz-transform: rotateY(120deg) translateZ(80px);
-ms-transform: rotateY(120deg) translateZ(80px);
}
#rotator2 a:nth-child(n+4) {
display: none;
}
#-webkit-keyframes rotator2 {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-120deg);
}
}
#-moz-keyframes rotator2 {
from {
-moz-transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-120deg);
}
}
#-ms-keyframes rotator2 {
from {
-ms-transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(-120deg);
}
}
#rotator2 {
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
-webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-webkit-animation-duration: 2s;
-webkit-animation-delay: 1s;
-moz-transform-origin: 0 0;
-moz-transform-style: preserve-3d;
-moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-moz-animation-duration: 2s;
-moz-animation-delay: 1s;
-ms-transform-origin: 0 0;
-ms-transform-style: preserve-3d;
-ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-ms-animation-duration: 2s;
-ms-animation-delay: 1s;
}
#rotator2:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
}
<div id="stage2">
<div id="rotator2" style="-webkit-animation-name: rotator2; -moz-animation-name: rotator2; -ms-animation-name: rotator2;">
<img src="img/1.jpg" width="280" alt ="1">
<img src="img/2.jpg" width="280" alt ="2">
<img src="img/3.jpg" width="280" alt ="3">
<img src="img/4.jpg" width="280" alt ="4">
<img src="img/5.jpg" width="280" alt ="5">
<img src="img/6.jpg" width="280" alt ="6">
<img src="img/7.jpg" width="280" alt ="7">
<img src="img/8.jpg" width="280" alt ="8">
</div>
</div>
Here the 1st image is continuously fliping
If I understand you correctly, as I said, you can use animation-delay. The value will be
(card index) * animation-duration.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
display: inline-block;
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
.flip-card .flip-card-inner {
animation: rotate 3s .3s infinite;
}
.flip-card:nth-child(2) .flip-card-inner {
animation-delay: .6s;
}
.flip-card:nth-child(3) .flip-card-inner {
animation-delay: .9s;
}
.flip-card:nth-child(4) .flip-card-inner {
animation-delay: 1.2s;
}
#keyframes rotate {
0%, 60% {
transform: rotateY(0);
}
10%, 50% {
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="cards">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
</div>
</body>
</html>
Update
To run it infinite, the animation should calculated differently because it should take care for the back animation.
The calculation is
0.3s (flip animation) * 5 (4 cards + 1 more for delay between iteration) * 2 (back and forth) = 3s.
So each "tick" is 10%. We want to flip it back just in the middle of the animation so it 50%. More 10% for the back animation tick.
Here is the lifecycle:
|---|---|---|---|---|---|---|---|---|---|
|___|___|___|___|___|___|___|___|___|___|
Front w w w w Back w w w w
.3s .3s .3s .3s .3s .3s .3s .3s .3s .3s
|_______________________________________|
3s
You can simply use that code attached below HTML and CSS trick:
<div class="c-searchblock_loop">
<div class="c-searchblock_loop-content">
<div class="c-searchblock_chevron">
<svg class="c-icon">
<use xlink:href="https://www.subachahai.com/dist/assets/icons/icons-sprite.svg#icon-chevron"></use>
</svg>
</div>
<div class="c-searchblock_image -first">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-1.png" alt="tools-1">
</div>
<div class="c-searchblock_image -back -second">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-2.png" alt="tools-2">
</div>
<div class="c-searchblock_image -third">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-3.png" alt="tools-3">
</div>
<div class="c-searchblock_image -back -fourth">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-4.png" alt="tools-4">
</div>
</div>
</div>
CSS:
.c-searchblock_chevron {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.c-searchblock_chevron, .c-searchblock_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-searchblock_image.-first {
-webkit-animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-first 4s linear infinite;
animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-first 4s linear infinite;
}
.c-searchblock_image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50% -25px;
transform-origin: 50% 50% -25px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.c-searchblock_chevron, .c-searchblock_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-searchblock_image.-back.-second {
-webkit-animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-second 4s cubic-bezier(.19,1,.22,1) infinite;
animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-second 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back {
-webkit-transform-origin: 50% 50% 25px;
transform-origin: 50% 50% 25px;
-webkit-transform: rotateY(
180deg);
transform: rotateY(
180deg);
}
.c-searchblock_image.-third {
-webkit-animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-third 4s cubic-bezier(.19,1,.22,1) infinite;
animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-third 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back.-fourth {
-webkit-animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-fourth 4s cubic-bezier(.19,1,.22,1) infinite;
animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-fourth 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back {
-webkit-transform-origin: 50% 50% 25px;
transform-origin: 50% 50% 25px;
-webkit-transform: rotateY(
180deg);
transform: rotateY(
180deg);
}
.c-searchblock.is-active .c-searchblock_footer,
.c-searchblock.is-active .c-searchblock_loop {
-webkit-transform: translate(0);
transform: translate(0)
}
.c-searchblock_loop {
position: relative;
display: inline-block;
width: 180px;
height: 180px;
-webkit-perspective: 200px;
perspective: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateY(40px);
transform: translateY(40px);
-webkit-transition: -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
transition: -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
transition: transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
transition: transform .8s cubic-bezier(.76, 0, .24, 1) .08s, -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s
margin: 50px auto;
}
.editMode .c-searchblock_loop {
-webkit-transform: none;
transform: none;
-webkit-transition: none;
transition: none
}
.c-searchblock_loop-content {
width: 100%;
height: 100%;
-webkit-animation: loop 2s cubic-bezier(.19, 1, .22, 1) infinite;
animation: loop 2s cubic-bezier(.19, 1, .22, 1) infinite
}
.c-searchblock_chevron,
.c-searchblock_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.c-searchblock_chevron {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.c-searchblock_chevron svg {
fill: #fff;
width: 120px;
height: 110px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
#-webkit-keyframes loop {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
25% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
75% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
to {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
}
#keyframes loop {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
25% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
75% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
to {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
}
#-webkit-keyframes loop-first {
0% {
opacity: 1
}
25% {
opacity: 1
}
26% {
opacity: 0
}
75% {
opacity: 0
}
76% {
opacity: 1
}
to {
opacity: 1
}
}
#keyframes loop-first {
0% {
opacity: 1
}
25% {
opacity: 1
}
26% {
opacity: 0
}
75% {
opacity: 0
}
76% {
opacity: 1
}
to {
opacity: 1
}
}
#-webkit-keyframes loop-second {
0% {
opacity: 1
}
50% {
opacity: 1
}
51% {
opacity: 0
}
to {
opacity: 0
}
}
#keyframes loop-second {
0% {
opacity: 1
}
50% {
opacity: 1
}
51% {
opacity: 0
}
to {
opacity: 0
}
}
#-webkit-keyframes loop-third {
0% {
opacity: 0
}
25% {
opacity: 0
}
26% {
opacity: 1
}
75% {
opacity: 1
}
76% {
opacity: 0
}
to {
opacity: 0
}
}
#keyframes loop-third {
0% {
opacity: 0
}
25% {
opacity: 0
}
26% {
opacity: 1
}
75% {
opacity: 1
}
76% {
opacity: 0
}
to {
opacity: 0
}
}
#-webkit-keyframes loop-fourth {
0% {
opacity: 0
}
50% {
opacity: 0
}
51% {
opacity: 1
}
to {
opacity: 1
}
}
#keyframes loop-fourth {
0% {
opacity: 0
}
50% {
opacity: 0
}
51% {
opacity: 1
}
to {
opacity: 1
}
}
#-webkit-keyframes loop-image-back {
0% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
25% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
50% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
75% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
to {
-webkit-transform: rotateY(540deg);
transform: rotateY(540deg)
}
}
#keyframes loop-image-back {
0% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
25% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
50% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
75% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
to {
-webkit-transform: rotateY(540deg);
transform: rotateY(540deg)
}
}
Related
I have the following code:
#keyframes ball1 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(120px);
opacity: 0%;
}
}
#keyframes ball2 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(160px);
opacity: 0%;
}
}
#keyframes ball3 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(200px);
opacity: 0%;
}
}
#keyframes ball4 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(240px);
opacity: 0%;
}
}
.ball {
background: black;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 10px;
animation-duration: 1s;
animation-iteration-count: 1;
}
#ball-1 {
animation-name: ball1;
}
#ball-2 {
animation-name: ball2;
animation-delay: 1s;
}
#ball-3 {
animation-name: ball3;
animation-delay: 2s;
}
#ball-4 {
animation-name: ball4;
animation-delay: 3s;
}
<div class="ball" id="ball-1"></div>
<div class="ball" id="ball-2"></div>
<div class="ball" id="ball-3"></div>
<div class="ball" id="ball-4"></div>
I want to achieve to follow:
Sequence starts
Ball 1 animates once.
There is a delay of 1 second.
Ball 2 animates once.
There is a delay of 1 second.
Ball 3 animates once.
There is a delay of 1 second.
Ball 4 animates once.
There is a delay of 1 second.
The sequence restarts from step 1.
This is what I currently have, but I don't know how to loop this sequence, it only plays ones. Not sure if it's possible with only css. If not I'm fine with JS as well.
Example: https://jsfiddle.net/patxh1gn/
do you mean something like this?
#keyframes ball1 {
0%,
12.501% {
transform: translateX(0px);
opacity: 0%;
}
6.25%,
12.502%,
100% {
opacity: 100%;
}
12.5% {
transform: translateX(var(--right));
opacity: 0%;
}
}
.ball {
background: black;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 10px;
animation: ball1 8s infinite;
}
#ball-1 {
--right: 120px;
}
#ball-2 {
--right: 160px;
animation-delay: 2s;
}
#ball-3 {
--right: 200px;
animation-delay: 4s;
}
#ball-4 {
--right: 240px;
animation-delay: 6s;
}
<div class="ball" id="ball-1"></div>
<div class="ball" id="ball-2"></div>
<div class="ball" id="ball-3"></div>
<div class="ball" id="ball-4"></div>
I have the following code:
/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 12.5s linear infinite 0s;
-ms-animation: vertical 12.5s linear infinite 0s;
-webkit-animation: vertical 12.5s linear infinite 0s;
color: #ea1534;
opacity: 0;
overflow: hidden;
position: absolute;
}
.verticalFlip span:nth-child(2) {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip span:nth-child(3) {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip span:nth-child(4) {
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.verticalFlip span:nth-child(5) {
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
25% {
opacity: 1;
-moz-transform: translateY(0px);
}
30% {
opacity: 0;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
25% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 0;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
25% {
opacity: 1;
-ms-transform: translateY(0px);
}
30% {
opacity: 0;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: rgb(1, 16, 231);
color: white;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalflip"><span>Change</span><span>Text</span></h1>
</section>
I would like the text to be Sample Change and the Change alternates to Text. Right now, the text is not alternating and its on a new line whereas I would like it to be all on one line and the Sample text does not change (remains constant) but there should be a vertical flip word change on the Change and it should alternate between Text. How can I accomplish this?
This is where I got the code from: https://codepen.io/kaceyatstandcreative/pen/PowbpKm
First, there are some errors in your code:
In HTML, you're missing the </div>.
Typo at class="verticalflip" should be verticalFlip as indicated in your css
Multiple color properties in a single css #hero h1 block
After fixing those errors, your animation doesn't appear because the -webkit-text-fill-color: transparent; removes any text color. You should change it into color: transparent; in your case.
Updated:
change text to background image
remove delay between text by remove other span dependencies.
/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 4s linear infinite;
-ms-animation: vertical 4s linear infinite;
-webkit-animation: vertical 4s linear infinite;
opacity: 0;
overflow: hidden;
position: absolute;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
background-position: 15% 20%;
}
.verticalFlip span:nth-child(2) {
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
50% {
opacity: 1;
-moz-transform: translateY(0px);
}
70% {
opacity: 0;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
50% {
opacity: 1;
-webkit-transform: translateY(0px);
}
70% {
opacity: 0;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
50% {
opacity: 1;
-ms-transform: translateY(0px);
}
70% {
opacity: 0;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
}
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalFlip"><span>Change</span><span>Text</span></div></h1>
</section>
You had some broken HTML, so I fixed that. Also replaced the spans with div because transform: rotate only works with block elements, not inline elements like span.
I animated, just by spinning the text, and not changing the opacity. I will leave that up to you if you want to add that. I also added a pause where the text isn't animated (looping from 90% to 10% with 0deg rotation).
In order to get all elements on the same row, I added display: flex to your h1, and to make the spinning text to overlay I was forced to use a grid layout, where both children are on row 1 and column 1 (grid-area). I tried position: absolute but background-clip: text didn't work on Firefox when I did that.
I increased the font size in order to show the background-clip in a better way.
[edit] Apparently, Chrome bugs out when using background-clip: text together with backface-visibility: hidden.
Working example: Firefox
#hero > h1 {
display: flex;
margin: 0;
margin-bottom: 16px;
font-size: 78px;
font-weight: 700;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.verticalflip {
display: grid;
}
.verticalflip > div {
--animation-duration: 6s;
grid-area: 1 / 1;
animation: vertical var(--animation-duration) linear infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.verticalflip > div:nth-child(1) {
animation-delay: calc(-0.5 * var(--animation-duration));
}
#keyframes vertical {
10% { transform: rotateX(0deg); }
40% { transform: rotateX(180deg); }
60% { transform: rotateX(180deg); }
90% { transform: rotateX(0deg); }
}
<section id="hero">
<h1 style="">
<div>Sample </div>
<div class="verticalflip">
<div>Change</div>
<div>Text</div>
</div>
</h1>
</section>
Working example: Chrome & Safari
#hero > h1 {
display: flex;
margin: 0;
margin-bottom: 16px;
font-size: 78px;
font-weight: 700;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
#hero div {
/* Chrome somehow "looses" the background when animating it */
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
-webkit-background-clip: text;
}
.verticalflip {
display: grid;
}
.verticalflip > div {
--animation-duration: 6s;
grid-area: 1 / 1;
animation: vertical var(--animation-duration) linear infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.verticalflip > div:nth-child(1) {
animation-delay: calc(-0.5 * var(--animation-duration));
}
#keyframes vertical {
10% { transform: rotateX(0deg); }
40% { transform: rotateX(180deg); }
60% { transform: rotateX(180deg); }
90% { transform: rotateX(0deg); }
}
<section id="hero">
<h1 style="">
<div>Sample </div>
<div class="verticalflip">
<div>Change</div>
<div>Text</div>
</div>
</h1>
</section>
#hero > h1 {
display: flex;
margin: 0;
margin-bottom: 16px;
font-size: 78px;
font-weight: 700;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
#hero div {
/* Chrome somehow "looses" the background when animating it */
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
-webkit-background-clip: text;
}
.verticalflip {
display: grid;
}
.verticalflip > div {
--animation-duration: 6s;
grid-area: 1 / 1;
animation: vertical var(--animation-duration) linear infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.verticalflip > div:nth-child(1) {
animation-delay: calc(-0.5 * var(--animation-duration));
}
#keyframes vertical {
10% { transform: rotateX(0deg); }
40% { transform: rotateX(180deg); }
60% { transform: rotateX(180deg); }
90% { transform: rotateX(0deg); }
}
<section id="hero">
<h1 style="">
<div>Sample </div>
<div class="verticalflip">
<div>Change</div>
<div>Text</div>
</div>
</h1>
</section>
I am using this code to create a gift box and it works fine when there is only one box.
However, when I add a new gift box next to the current one horizontally, I can see the added one but I am unable to open it. Gift boxes seem to work as intended until a user tries to open the added box/boxes.
How can I fix this?
Thanks for your time!
var to = 'Friend!';
var gift_url = 'https://stackoverflow.com/';
var gift_image_url = 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png';
var nametag = document.getElementById("nametag");
var present = document.getElementById("present");
var presentImage = document.getElementById("present-image");
function init() {
var _giftLink,
_giftImg;
if (gift_url) {
_giftLink = document.createElement("a");
_giftLink.href = gift_url;
_giftLink.target = "_blank";
presentImage.appendChild(_giftLink);
}
if (gift_image_url) {
_giftImg = document.createElement("img");
_giftImg.src = gift_image_url;
if (_giftLink) {
_giftLink.appendChild(_giftImg);
} else {
presentImage.appendChild(_giftImg);
}
}
present.addEventListener("click", function(e) {
present.classList.toggle("open");
}, false);
nametag.innerText = to;
}
init();
html,
body {
margin: 0;
}
.above-fold {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
position: relative;
}
.above-fold .info-text {
width: 100%;
display: block;
text-align: center;
margin: 0;
padding: 0;
color: #555;
font-family: 'Avenir';
font-weight: 100;
font-size: 13px;
height: 25px;
align-self: flex-end;
}
.wrap-present {
width: 100%;
display: -webkit-box;
display: flex;
align-self: flex-end;
}
.present-box {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: auto;
-webkit-animation: rotate 11s alternate linear infinite;
animation: rotate 11s alternate linear infinite;
cursor: pointer;
}
.present-box:hover {
-webkit-animation: staticFront 700ms ease forwards;
animation: staticFront 700ms ease forwards;
}
.present-box.open {
/*&>.side.top{
opacity: .2;
}*/
-webkit-animation: zoomIn 1s ease-in forwards;
animation: zoomIn 1s ease-in forwards;
-webkit-transform: rotateX(-103deg) rotateY(-180deg);
transform: rotateX(-103deg) rotateY(-180deg);
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box.open .present {
pointer-events: auto;
visibility: visible;
}
.present-box.open .present .img-wrap {
opacity: 1;
-webkit-transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: transform 600ms 800ms, opacity 800ms 200ms;
transition: transform 600ms 800ms, opacity 800ms 200ms, -webkit-transform 600ms 800ms;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.present-box.open > .side {
opacity: .3;
-webkit-transition: opacity 500ms 600ms;
transition: opacity 500ms 600ms;
}
.present-box.open > .side.back {
opacity: 0.7;
-webkit-transform: translateZ(-101px) rotateY(180deg);
transform: translateZ(-101px) rotateY(180deg);
}
.present-box.open > .side.front {
-webkit-transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: transform 800ms 0s, opacity 500ms 600ms;
transition: transform 800ms 0s, opacity 500ms 600ms, -webkit-transform 800ms 0s;
-webkit-transform: translateZ(100px) rotateY(190deg) translateX(0px);
transform: translateZ(100px) rotateY(190deg) translateX(0px);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0.3;
}
.present-box .present {
position: absolute;
width: 200px;
height: 200px;
z-index: 50;
-webkit-transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
display: -webkit-box;
display: flex;
-webkit-perspective: 600px;
perspective: 600px;
pointer-events: none;
visibility: hidden;
}
.present-box .present > .img-wrap {
width: 200px;
align-self: center;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
opacity: 0;
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
}
.present-box .present > .img-wrap a {
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
position: relative;
display: block;
-webkit-transform: scale(0.94);
transform: scale(0.94);
}
.present-box .present > .img-wrap a:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
.present-box .present > .img-wrap img {
max-width: 100%;
height: auto;
}
.present-box > .side {
width: 200px;
height: 200px;
position: absolute;
display: block;
background: repeating-linear-gradient(45deg, #cc2000, #cc2000 20px, #ffffff 20px, #ffffff 40px);
top: 0;
left: 0;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box > .side.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.present-box > .side.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
transform-origin: top right;
}
.present-box > .side.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
transform-origin: center left;
}
.present-box > .side.top {
-webkit-transform: rotateX(-90deg) translateY(-100px);
transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 100px;
perspective: 100px;
text-align: center;
}
.present-box > .side.top .to {
display: inline-block;
font-family: cursive;
position: relative;
padding: 10px 10px 30px 10px;
border: 5px dotted #ff6666;
border-width: 2px;
background: #fff;
margin: auto;
-webkit-transform: translateZ(-2px) translateY(50px);
transform: translateZ(-2px) translateY(50px);
}
.present-box > .side.top .to:after {
content: 'Merry Christmas';
display: inline-block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color: #990000;
}
.present-box > .side.top .to .name {
display: block;
position: absolute;
-webkit-transform: translateY(20px) rotateY(180deg) translateX(10px);
transform: translateY(20px) rotateY(180deg) translateX(10px);
text-align: center;
width: 100%;
font-size: 1.1rem;
color: green;
}
.present-box > .side.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.present-box > .side.front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#-webkit-keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#-webkit-keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
#keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>
Coderman was close, but there is not a singular form of GetElementsByClassName in Javascript.
You need to iterate over all of the instances of the class and add a handler to each of them.
var to = 'Friend!';
var gift_url = 'https://stackoverflow.com/';
var gift_image_url = 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png';
var nametag = document.getElementById("nametag");
var present = document.getElementsByClassName("present-box");
var presentImage = document.getElementById("present-image");
function init() {
var _giftLink,
_giftImg;
if (gift_url) {
_giftLink = document.createElement("a");
_giftLink.href = gift_url;
_giftLink.target = "_blank";
presentImage.appendChild(_giftLink);
}
if (gift_image_url) {
_giftImg = document.createElement("img");
_giftImg.src = gift_image_url;
if (_giftLink) {
_giftLink.appendChild(_giftImg);
} else {
presentImage.appendChild(_giftImg);
}
}
for (var i = 0; i < present.length; i++) {
present[i].addEventListener("click", function(e) {
this.classList.toggle("open");
}, false);
}
nametag.innerText = to;
}
init();
html,
body {
margin: 0;
}
.above-fold {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
position: relative;
}
.above-fold .info-text {
width: 100%;
display: block;
text-align: center;
margin: 0;
padding: 0;
color: #555;
font-family: 'Avenir';
font-weight: 100;
font-size: 13px;
height: 25px;
align-self: flex-end;
}
.wrap-present {
width: 100%;
display: -webkit-box;
display: flex;
align-self: flex-end;
}
.present-box {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: auto;
-webkit-animation: rotate 11s alternate linear infinite;
animation: rotate 11s alternate linear infinite;
cursor: pointer;
}
.present-box:hover {
-webkit-animation: staticFront 700ms ease forwards;
animation: staticFront 700ms ease forwards;
}
.present-box.open {
/*&>.side.top{
opacity: .2;
}*/
-webkit-animation: zoomIn 1s ease-in forwards;
animation: zoomIn 1s ease-in forwards;
-webkit-transform: rotateX(-103deg) rotateY(-180deg);
transform: rotateX(-103deg) rotateY(-180deg);
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box.open .present {
pointer-events: auto;
visibility: visible;
}
.present-box.open .present .img-wrap {
opacity: 1;
-webkit-transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: transform 600ms 800ms, opacity 800ms 200ms;
transition: transform 600ms 800ms, opacity 800ms 200ms, -webkit-transform 600ms 800ms;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.present-box.open > .side {
opacity: .3;
-webkit-transition: opacity 500ms 600ms;
transition: opacity 500ms 600ms;
}
.present-box.open > .side.back {
opacity: 0.7;
-webkit-transform: translateZ(-101px) rotateY(180deg);
transform: translateZ(-101px) rotateY(180deg);
}
.present-box.open > .side.front {
-webkit-transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: transform 800ms 0s, opacity 500ms 600ms;
transition: transform 800ms 0s, opacity 500ms 600ms, -webkit-transform 800ms 0s;
-webkit-transform: translateZ(100px) rotateY(190deg) translateX(0px);
transform: translateZ(100px) rotateY(190deg) translateX(0px);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0.3;
}
.present-box .present {
position: absolute;
width: 200px;
height: 200px;
z-index: 50;
-webkit-transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
display: -webkit-box;
display: flex;
-webkit-perspective: 600px;
perspective: 600px;
pointer-events: none;
visibility: hidden;
}
.present-box .present > .img-wrap {
width: 200px;
align-self: center;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
opacity: 0;
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
}
.present-box .present > .img-wrap a {
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
position: relative;
display: block;
-webkit-transform: scale(0.94);
transform: scale(0.94);
}
.present-box .present > .img-wrap a:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
.present-box .present > .img-wrap img {
max-width: 100%;
height: auto;
}
.present-box > .side {
width: 200px;
height: 200px;
position: absolute;
display: block;
background: repeating-linear-gradient(45deg, #cc2000, #cc2000 20px, #ffffff 20px, #ffffff 40px);
top: 0;
left: 0;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box > .side.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.present-box > .side.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
transform-origin: top right;
}
.present-box > .side.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
transform-origin: center left;
}
.present-box > .side.top {
-webkit-transform: rotateX(-90deg) translateY(-100px);
transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 100px;
perspective: 100px;
text-align: center;
}
.present-box > .side.top .to {
display: inline-block;
font-family: cursive;
position: relative;
padding: 10px 10px 30px 10px;
border: 5px dotted #ff6666;
border-width: 2px;
background: #fff;
margin: auto;
-webkit-transform: translateZ(-2px) translateY(50px);
transform: translateZ(-2px) translateY(50px);
}
.present-box > .side.top .to:after {
content: 'Merry Christmas';
display: inline-block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color: #990000;
}
.present-box > .side.top .to .name {
display: block;
position: absolute;
-webkit-transform: translateY(20px) rotateY(180deg) translateX(10px);
transform: translateY(20px) rotateY(180deg) translateX(10px);
text-align: center;
width: 100%;
font-size: 1.1rem;
color: green;
}
.present-box > .side.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.present-box > .side.front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#-webkit-keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#-webkit-keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
#keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present2">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>
I have made an animation which on hover must be like the image below;1
But instead it always align like this;2
I want to align all the in a straight line when animation is paused on hover on . But it did not happen.I tried to use animation-fill-mode:forwards; but it did not worked.All the <div id="circle"> must be align in a straight line such that it resembles a straight block of sevral colors just like my first pictures which was my expectation. It occurs sometime only but not every time. I want it to occur every time as i hover the <div>. You can use javascript too. but this animation must work and all <div> must align in a straight line.
.circle-container{
height:100px;
display:flex;
position:absolute;
width:fit-content;
overflow:hidden;
align-items:center;
justify-content:center;
}
div.circle1 {order:1;}
div.circle2 {order:2;}
div.circle3 {order:3;}
div.circle4 {order:4;}
div.circle5{order:5;}
.circle1, .circle2, .circle3, .circle4, .circle5{
border-radius:45%;
}
#circle{
align-items:center;
justify-content:center;
color:white;
display:flex;
height:55px;
width:55px;
}
.circle5{
background:#FF6347;
animation:bubbling5 1s infinite;
animation-direction:alternate;
}
.circle4{
background:#4682B4;
animation:bubbling4 1s infinite;
animation-direction:alternate;
}
.circle3{
background:#D2B48C;
animation:bubbling3 1s infinite;
animation-direction:alternate;
}
.circle2{
background:#008080;
animation:bubbling2 1s infinite;
animation-direction:alternate;
}
.circle1{
background:#D8BFD8;
animation:bubbling1 1s infinite;
animation-direction:alternate;
}
#keyframes bubbling1 {
0% {
transform: translateY(0px) translateX(22px);
}
50% {
transform: translateY(-10px) translateX(22px);
}
75% {
transform: translateY(10px) translateX(22px);
}
100% {
transform: translateY(0px) translateX(22px);
}
}
#keyframes bubbling2 {
0% {
transform: translateY(0px) translateX(12px);
}
45% {
transform: translateY(-10px) translateX(12px);
}
70% {
transform: translateY(10px) translateX(12px);
}
100% {
transform: translateY(0px) translateX(12px);
}
}
#keyframes bubbling3 {
0% {
transform: translateY(0px) translateX(2px);
}
40% {
transform: translateY(-10px) translateX(2px);
}
65% {
transform: translateY(10px) translateX(2px);
}
100% {
transform: translateY(0px) translateX(2px);
}
}
#keyframes bubbling4 {
0% {
transform: translateY(0px) translateX(-8px);
}
35% {
transform: translateY(-10px) translateX(-8px);
}
60% {
transform: translateY(10px) translateX(-8px);
}
100% {
transform: translateY(0px) translateX(-8px);
}
}
#keyframes bubbling5 {
0% {
transform: translateY(0px) translateX(-18px);
}
30% {
transform: translateY(-10px) translateX(-18px);
}
55% {
transform: translateY(10px) translateX(-18px);
}
100% {
transform: translateY(0px) translateX(-18px);
}
}
.circle-container:hover {
position:absolute;
}
.circle-container:hover .circle5 {
border-radius:0% 30% 30% 0%;
animation-play-state:paused;
transition: all 0.2s;
}
.circle-container:hover .circle4 {
border-radius:0%;
animation-play-state:paused;
transition: all 0.4s;
}
.circle-container:hover .circle3 {
border-radius:0%;
animation-play-state:paused;
transition: all 0.6s;
}
.circle-container:hover .circle2 {
border-radius:0%;
transition: all 0.8s;
animation-play-state:paused;
}
.circle-container:hover .circle1 {
border-radius:30% 0% 0% 30%;
transition: all 1s;
animation-play-state:paused;
}
.circle-container:hover .c-title {
display:none;
}
<div class="circle-container">
<div id="circle" class="circle1"><h1 class="c-title">E</h1></div>
<div id="circle" class="circle2"><h1 class="c-title">M</h1></div>
<div id="circle" class="circle3"><h1 class="c-title">A</h1></div>
<div id="circle" class="circle4"><h1 class="c-title">I</h1></div>
<div id="circle" class="circle5"><h1 class="c-title">L</h1></div>
</div>
Looks like someone produced a ton of unnecessary code =))
Regarding your question, you have to remove the animation at all, not pause it.
See the snippet below.
.circle-container {
height: 100px;
display: flex;
position: absolute;
width: fit-content;
overflow: hidden;
align-items: center;
justify-content: center;
}
.circle-container div {
display: inline-block;
height: 55px;
width: 55px;
margin-right: -10px;
border-radius: 45%;
color: white;
font:900 2em/55px serif;
text-align: center;
animation: bubbling 1s infinite alternate;
transition: all .2s;
}
.circle-container div:nth-child(1) {
background: #D8BFD8;
}
.circle-container div:nth-child(2) {
background: #008080;
animation-delay: .1s;
}
.circle-container div:nth-child(3) {
background: #D2B48C;
animation-delay: .2s;
}
.circle-container div:nth-child(4) {
background: #4682B4;
animation-delay: .3s;
}
.circle-container div:nth-child(5) {
background: #FF6347;
margin: 0;
animation-delay: .4s;
}
#keyframes bubbling {
50% {
transform: translateY(-10px);
}
75% {
transform: translateY(10px);
}
}
.circle-container:hover div {
border-radius: 0;
color: transparent;
transform: translateY(0);
animation: none;
}
.circle-container:hover div:last-child {
border-radius: 0 30% 30% 0;
}
.circle-container:hover div:first-child {
border-radius: 30% 0 0 30%;
}
<div class="circle-container">
<div>E</div>
<div>M</div>
<div>A</div>
<div>I</div>
<div>L</div>
</div>
I've created a simple slideshow using just CSS3 animation and keyframes and I'm trying to figure out how I could create navigation arrows that allow you to flick through the slides.
I would want a next and previous button/arrow that slides to each video in the slide on click. I've been trying to do it with CSS but not having much luck, I wondered if anyone might have a solution I might have overlooked.
Any suggestions would be appreciated.
Heres a simple slider to demonstrate what I have...
http://jsfiddle.net/D5Qcw/5/
HTML
<div class="wrapper">
<div class="header">
<h1>Logo Name</h1>
<p class="menu">Menu Button</p>
</div>
<div id="carousel">
<ul class="video-list">
<li>
<div class="content-wrapper">
<div class="progress-bar"></div>
<h2>Content box</h2>
<div class="crossRotate">open button</div>
<p>Content box paragraph text <br/><br/>Play button
</p>
</div>
<div class="video-wrapper">
<iframe width="25%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe>
</div>
</li>
<li>
<div class="content-wrapper">
<div class="progress-bar"></div>
<h2>Content box 2</h2>
<div class="crossRotate">open button</div>
<p>Content box paragraph text <br/><br/>Play button
</p>
</div>
<div class="video-wrapper">
<iframe width="25%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe>
</div>
</li>
<li>
<div class="content-wrapper">
<div class="progress-bar"></div>
<h2>Content box 3</h2>
<div class="crossRotate">open button</div>
<p>Content box paragraph text <br/><br/>Play button
</p>
</div>
<div class="video-wrapper">
<iframe width="25%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe>
</div>
</li>
<li>
<div class="content-wrapper">
<div class="progress-bar"></div>
<h2>Content box 4</h2>
<div class="crossRotate">open button</div>
<p>Content box paragraph text <br/><br/>Play button
</p>
</div>
<div class="video-wrapper">
<iframe width="100%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe>
</div>
</li>
</ul>
</div> <!-- /carousel -->
</div>
CSS
.wrapper {
position: absolute;
width: 100%;
height: 400px;
overflow: hidden;
margin: 0;
padding:0;
z-index: 1;
}
.header {
position: absolute;
height: 20em;
z-index: 2;
width: 100%;
display: block;
padding-top: 2em;
}
h1 {
font-size: 20px;
color: blue;
z-index: 999;
float: left;
}
h2 {
position: absolute;
float: left;
}
p.menu {
position: absolute;
color: blue;
z-index: 999;
float: left;
right: 20px;
}
p {
position: absolute;
padding-top: 3em;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
#carousel {
width: 100%;
}
#carousel .video-list {
position: relative;
width: 400%;
height: 100%;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
animation: slider 40s ease-in-out infinite;
-webkit-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite;
-moz-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite;
-o-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite;
-ms-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite;
}
#keyframes slider {
0% { transform: translateX(0%); }
23% { transform: translateX(0%); }
26% { transform: translateX(-25%); }
51% { transform: translateX(-25%); }
54% { transform: translateX(-50%); }
79% { transform: translateX(-50%); }
82% { transform: translateX(-75%); }
97% { transform: translateX(-75%); }
100% { transform: translateX(0%); }
}
#-webkit-keyframes slider {
0% { -webkit-transform: translateX(0%); }
23% { -webkit-transform: translateX(0%); }
26% { -webkit-transform: translateX(-25%); }
51% { -webkit-transform: translateX(-25%); }
54% { -webkit-transform: translateX(-50%); }
79% { -webkit-transform: translateX(-50%); }
82% { -webkit-transform: translateX(-75%); }
97% { -webkit-transform: translateX(-75%); }
100% { -webkit-transform: translateX(0%); }
}
#-moz-keyframes slider {
0% { -moz-transform: translateX(0%); }
23% { -moz-transform: translateX(0%); }
26% { -moz-transform: translateX(-25%); }
51% { -moz-transform: translateX(-25%); }
54% { -moz-transform: translateX(-50%); }
79% { -moz-transform: translateX(-50%); }
82% { -moz-transform: translateX(-75%); }
97% { -moz-transform: translateX(-75%); }
100% { -moz-transform: translateX(0%); }
}
#carousel .video-list li {
position: relative;
width: 25%;
height: 100%;
overflow: hidden;
display: inline-block;
float: left;
}
#carousel .video-list .content-wrapper {
position: absolute;
width: 100%;
height: 50%;
bottom: -130px;
z-index: 999;
background: rgba(255, 255, 255, 0.9);
-webkit-transition: bottom 1s;
-moz-transition: bottom 1s;
-o-transition: bottom 1s;
-ms-transition: bottom 1s;
transition: bottom 1s;
}
.progress-bar {
background: #000;
height: 5px;
width: 40px;
position: relative;
animation: mymove 10s infinite;
-webkit-animation: mymove 10s infinite;
-moz-animation: mymove 10s infinite;
-o-animation: mymove 10s infinite;
-ms-animation: mymove 10s infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
}
#keyframes mymove {
from {left:0;}
to {right:-97%;}
}
#-webkit-keyframes mymove {
from {left:0;}
to {right:-97%;}
}
#carousel .video-wrapper {
position: relative;
top: 0%;
left: 0%;
width: 200%;
height: 200%;
z-index: 2;
}
#carousel .video-wrapper iframe {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 50%;
min-height: 50%;
margin: auto;
z-index: 2;
}
.crossRotate {
position: absolute;
font-size: 20px;
right: 0;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -o-transform;
transition-property: transform;
z-index: 999;
}
.crossRotate:hover {
cursor: pointer;
}
I would use Javascript for the userinteraction
here is an easy tutorial.
Hope this helps
Here is a JSFiddle that should give you the idea :)
$(function () {
var position = 0;
$('#next').on('click', function (e) {
e.preventDefault();
position = (position + 25) % 100;
$('#carousel .video-list').css('-webkit-transform', 'translateX(-' + position + '%)');
});
});
http://jsfiddle.net/D5Qcw/6/