Delay Animation with CSS only - css

I've got the following code which rotates words with a CSS animation. I'm trying to figure out how to pause the animation on each word, before moving to the next word. I've tried using animation-delay, but that only applies to the start of the animation rather than each item.
How can I pause the animation FOR EACH WORD?
.im {
float: left;
margin-right: 0.3em;
}
.im-wrapper {
display: flex;
height: 1.1em;
}
.im-items {
overflow: hidden;
}
.im-item {
display: block;
height: 100%;
color: $primary;
animation: move 10s infinite;
animation-delay: 1s;
white-space: nowrap;
}
#keyframes move {
0% {
transform: translateY(0%);
}
20% {
transform: translateY(-100%);
}
40% {
transform: translateY(-200%);
}
60% {
transform: translateY(-300%);
}
80% {
transform: translateY(-400%);
}
100% {
transform: translateY(0%);
}
}
<div class="hero-top-title">
<div style="display: inline-block;">
<div>Hi</div>
</div>, I'm
<div style="display: inline-block;">
<div>A Person</div>
</div>.
<br>
<div class="im">Am I a</div>
<div class="im-wrapper">
<div class="im-items">
<div class="im-item im-item1">Father</div>
<div class="im-item im-item2">Mother</div>
<div class="im-item im-item3">Brother</div>
<div class="im-item im-item4">Sister</div>
<div class="im-item im-item5">Grandma</div>
</div>
<div>?</div>
</div>
</div>
How can I pause the animation FOR EACH WORD?

Need to keep the same transform of couple of moment then trigger next. Please follow the code below and you will understand what I mean.
.im {
float: left;
margin-right: 0.3em;
}
.im-wrapper {
display: flex;
height: 1.1em;
}
.im-items {
overflow: hidden;
}
.im-item {
display: block;
height: 100%;
color: $primary;
animation: move 10s infinite;
animation-delay: 1s;
white-space: nowrap;
}
/* Here is the different */
#keyframes move {
0% {
transform: translateY(0%);
}
10% {
transform: translateY(-100%);
}
20% {
transform: translateY(-100%);
}
30% {
transform: translateY(-200%);
}
40% {
transform: translateY(-200%);
}
50% {
transform: translateY(-300%);
}
60% {
transform: translateY(-300%);
}
70% {
transform: translateY(-400%);
}
80% {
transform: translateY(-400%);
}
90% {
transform: translateY(0%);
}
100% {
transform: translateY(0%);
}
}
<div class="hero-top-title">
<div style="display: inline-block;">
<div>Hi</div>
</div>, I'm
<div style="display: inline-block;">
<div>A Person</div>
</div>.
<br>
<div class="im">Am I a</div>
<div class="im-wrapper">
<div class="im-items">
<div class="im-item im-item1">Father</div>
<div class="im-item im-item2">Mother</div>
<div class="im-item im-item3">Brother</div>
<div class="im-item im-item4">Sister</div>
<div class="im-item im-item5">Grandma</div>
</div>
<div>?</div>
</div>
</div>

Delay works only once at the start. So doesn't work with multiple iterations. You need to add blank frames like Feroz suggestd.
Here is a thread about the same topic: CSS animation delay in repeating
What you are trying is some sort of vertical carousel. Look for CSS only carousels. Following is an example, you can repurpose it to slide your text. You need to adjust animation slideMe to change pause time. Click on 'Full page' to see it better.
A codepen demo:
<iframe height="400px" style="width: 100%;" scrolling="no" title="CSS only - A scalable auto sliding carousel -vertical" src="https://codepen.io/onkarruikar/embed/RwZzrMp?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true"
allowfullscreen="true">
See the Pen <a href="https://codepen.io/onkarruikar/pen/RwZzrMp">
CSS only - A scalable auto sliding carousel -vertical</a> by OnkarRuikar (#onkarruikar)
on CodePen.
</iframe>

Related

How do I move an element with transform relative to its rotation in CSS

Im attempting to make a clicker game with html css and javascript, and was trying to get some cursors to be animated like the ones that click for you in cookie clicker.
you will probably see what I mean when you run the project
I just want the cursors to move away from the div and then back again
here is my code:
const images = document.querySelectorAll("img");
images.forEach(function(e) {
let randomval = Math.floor(Math.random() * (359 - 0 + 1))
e.style.transform = "rotate(" + randomval + "deg)";
});
* {
margin: 0;
padding: 0;
}
.clicked {
margin: 100px;
width: 300px;
height: 300px;
border-radius: 100%;
background-color: aquamarine;
}
#keyframes clickeranim {
0% {
transform: translate(0, 150px);
}
50% {
transform: translate(0, 165px);
}
100% {
transform: translate(0, 150px);
}
}
.wrapper {
position: absolute;
width: 13.1px;
height: 17px;
position: absolute;
top: 250px;
left: calc(250px - calc(13.1px / 2));
transform-origin: 50% -150px;
transform: translate(0, 150px);
animation: clickeranim 1s infinite ease-in-out;
}
img {
width: 13.1px;
height: 17px;
transform-origin: 50% -150px;
}
<div class="clicked"></div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>

Image scroll within div

I'm trying to achieve the following scrolling effect from the Rocket.Chat homepage.
See effect here
Site: https://rocket.chat/
The issue is that I can't seem to make the image move like they have in the site. Does somebody have any idea why? Or can pass an example?
My component.html
<section class="community py-5">
<div class="container">
<div class="content d-flex">
<div class="content-info">
<div class="mb-5">
<h3>Lorem ipsum text</h3>
</div>
<div class="text-wrapper">
<div class="text">
Some information to be said
</div>
</div>
<div class="btn-wrapper mt-5">
<a href="#" class="btn-contract-us">
<div>
<strong>Join Us</strong>
</div>
</a>
</div>
</div>
<div class="content-image">
<img
[src]="codeImg"
alt=""
draggable="false"
/>
</div>
</div>
</div>
</section>
My component.scss
.community {
position: relative;
.content-info {
padding: 110px 140px 64px;
flex: 1;
background-color: #f7f8fa;
// background-img
background-position: -40px 0;
background-size: 730px;
background-repeat: no-repeat;
div.text {
margin: 0;
font-size: 1.6rem;
line-height: 3.2rem;
}
.btn-contract-us {
background-color: #f5455c;
}
}
.content-image {
overflow: hidden;
width: 30%;
max-height: 524px;
max-width: 430px;
background-color: #1f2329;
background-image: linear-gradient(180deg, #1f2329 60%, #000);
img {
transform: translate3d(0px, -45.9095%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);;
transform-style: preserve-3d;
will-change: transform;
}
}
}
You can use a css-keyframe-animation of the background-image for that:
.component{
display: flex;
align-items: center;
justify-content: space-between;
}
.image{
width:300px;
height:200px;
background-image: url('https://placekitten.com/300/400');
animation: scrollImage;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
#keyframes scrollImage{
from{
background-position: center 0%
}
to{
background-position: center 100%
}
}
<div class="component">
<div class="content">
<h1>Look, Ma!</h1>
<p>I animated a kitten instead of sourcecode.</p>
</div>
<div class="image"></div>
</div>
Usage:
animation-duration - sets the duration of one iteration of your animation
animation-iteration-count: infinite - lets your animation run endlessly
animation-direction: alternate - lets your animation loop back and forth over and over again

Why is the animation rot-corona not working?

I am working on a coronavirus project and the animation rot-corona is not working I want it to rotate 360 degrees after every 3 sec
and for a note bootstrap-4 is included in it
Code
/* SCSS */
#rotate-corona-text {
h1 {
font-size: 3rem;
}
img {
width: 100px;
height: 100px;
}
#rotate-corona-text {
img {
animation: rot-corona 3s linear infinite;
}
}
}
<section id="main-header" class="py-4">
<div class="container py-4">
<div class="row border py-4 align-items-center justify-content-between">
<div class="col-12 col-md-4 order-2 order-lg-1 " id="unity-images">
</div>
<div class="col-12 col-md-7 order-1 order-lg-2" id="rotate-corona-text">
<h1 class="text-primary">lets stay safe and fight against cor<span id="rotate-cororna"><img src="./assets/corona-icon.jpg" alt=""></span>na </h1>
</div>
</div>
</div>
</section>
and for the image which I want to rotate is https://ibb.co/qFSqkyq
SCSS compiles to this:
#rotate-corona-text h1 {
font-size: 3rem;
}
#rotate-corona-text img {
width: 100px;
height: 100px;
}
#rotate-corona-text #rotate-corona-text img {
animation: rot-corona 3s linear infinite;
}
Note that the 3rd statement has a multiple ID selector that does not select the node required.
You are missing #keyframes to define the animation that you have declared for the img.
Output:
#rotate-corona-text h1 {
font-size: 3rem;
}
#rotate-corona-text img {
width: 100px;
height: 100px;
}
#rotate-corona-text img {
animation: rot-corona 6s infinite; /* 6s because 50% is completed at 3s. */
}
#keyframes rot-corona {
0% {
transform: rotate(0);
}
50% {
transform: rotate(360deg); /* CSS does not offer animation-delay between iterations. This is a hack */
}
100% {
transform: rotate(360deg);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="main-header" class="py-4">
<div class="container py-4">
<div class="row border py-4 align-items-center justify-content-between">
<div class="col-12 col-md-4 order-2 order-lg-1 " id="unity-images">
</div>
<div class="col-12 col-md-7 order-1 order-lg-2" id="rotate-corona-text">
<h1 class="text-primary">Lets stay safe and fight against Cor<span id="rotate-cororna"><!-- Transparent background for you --><img src="https://i.stack.imgur.com/9Wifk.png" alt=""></span>na </h1>
</div>
</div>
</div>
</section>

CSS - stopping animation with :hover (no JS)

Is there any way of stopping animation with :hover and make it run again once hovered off?
This part is solved:
I thought of doing it with animation-state-paused, but as the animation runs on multiple elements with precised animation-delay, such solution desynchronizes elements.
What I would like to achieve 'at least' is to stop all of the animation once hovered.
Still looking for solution for this part:
And the Great Achievement would be (additionaly) to change z-index so the hovered picture goes in front of all the other ones... and come backs to its z-index from animation once hovered off + animation continues the cycle.
Important thing - NO JAVASCRIPT (I'd really like to use it, but I cannot because of some CMS settings).
Code without hover: CODEPEN and SOSnippet:
.cube2>div{
position:absolute;
left:50%;
transform: translateX(-50%);
width:450px;
}
.playground2 {
overflow: hidden;
}
.frame {
position: absolute;
top:-12px;
left:-1px;
z-index: 1;}
.one, .two, .three, .four, .five, .six, .seven, .eight{
animation: comedown 32s infinite ease-in-out
}
.eight {
animation-delay: 0s
}
.seven {
animation-delay: 4s
}
.six {
animation-delay: 8s
}
.five {
animation-delay: 12s
}
.four {
animation-delay: 16s
}
.three {
animation-delay: 20s
}
.two {
animation-delay: 24s
}
.one {
animation-delay: 28s;
}
.container {
background: darkkhaki;
height: 400px;
position: relative;
}
.cube2 {
top: 100px;
height: 300px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#-webkit-keyframes comedown {
0% {
top: 0%;
z-index: 1;
}
12.5% {
top: 120%;
z-index: 2;
left:50%;
transform:translateX(-50%);
}
13%{z-index:-15}
25%{
top:-50px;
transform: translateX(-32%)
}
35%{z-index:-10}
37.5%{
top:-42px;
transform: translateX(-35%);
}
50%{
top:-36px;
transform: translateX(-38%);
z-index:-6;
}
62.5%{
top:-28px;
transform: translateX(-41%);
z-index:-5;
}
75%{
top:-20px;
transform: translateX(-44%);
z-index:-4;
}
87.5%{
top:-12px;
transform: translateX(-47%);
z-index:-3;
}
100%{
top:0px;
left:50%;
transform:translateX(-50%);
z-index:-2;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="playground2 container">
<div class="cube2">
<div class="one">
<img class="face" src="https://s17.postimg.org/71iegzebj/img_little.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="two">
<img class="face" src="https://s17.postimg.org/duncqzuin/img_little3.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="three">
<img class="face" src="https://s17.postimg.org/o3b8j2t6n/img_little2.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="four">
<img class="face" src="https://s17.postimg.org/v97kz9rnj/img_little4.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="five">
<img class="face" src="https://s16.postimg.org/4reke4owl/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="six">
<img class="face" src="https://s16.postimg.org/3qebp07x1/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="seven">
<img class="face" src="https://s16.postimg.org/fgs96e0ph/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="eight">
<img class="face" src="https://s16.postimg.org/xxmnx7gnp/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
</div>
</div>
The trick is to catch :hover on .cube2.
This will pause the animation:
.cube2:hover > div{
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
To bring image box to front using z-index, use this:
.cube2 > div:hover{
z-index: 99 !important;
}
.cube2:hover > div.one, .cube2:hover >.two, .cube2:hover >.three, .cube2:hover >.four, .cube2:hover >.five,.cube2:hover > .six, .cube2:hover >.seven, .cube2:hover >.eight{
animation-play-state: paused;
}
This way all animation is stopped since you call hover on .cube2
See:
https://jsfiddle.net/duuhr712/

3d cube rotation backwards text in div

I have a 3d cube rotation, that happens on hover. Everything works fine except one thing. When you roll over and the cube rotates showing a new side with text....the text is backwards, not sure why this is happening. I have a JS fiddle set up, and any help I can get on this would be great.
http://jsfiddle.net/c3ewZ/6/
html:
This is back
<div class='box-scene col-xs-12 col-sm-3'>
<div class='box'>
<div class='front face'></div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
<div class='box-scene col-xs-12 col-sm-3'>
<div class='box'>
<div class='front face'></div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
<div class='box-scene col-xs-12 col-sm-3'>
<div class='box'>
<div class='front face'></div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
css
body {
margin:0px;
padding:0px;
}
.box-scene {
-webkit-perspective: 700;
height: 180px;
float:left;
z-index: 999;
padding:0px !important;
}
.box-scene:hover .box {
-webkit-transform: rotateY(90deg);
}
.box {
width: 100%;
height: 100%;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0.4s ease-out;
-webkit-transform-origin: 90px 90px -90px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transform-origin: 0 0;
}
.front {
-webkit-transform: rotateY(0deg);
z-index: 2;
background: #d9d9d9;
}
.side {
background: #9dcc78;
-webkit-transform: rotateY(90deg);
z-index: 1;
left: 0px;
}
JS
var resizer = function () {
var width = parseInt($(".box-scene").css("width"));
$(".box").css("-webkit-transform-origin", "center center -" + width / 2 + "px");
};
resizer();
$(window).resize(function () {
resizer();
});
Rotating the panel the other way will fix the mirror imaging of the text.
.box-scene:hover .box {
-webkit-transform: rotateY(-90deg);
}

Resources