I've got this animation that I want to add a pause in between its loops / iterations. I've tried doing it with animation-delay but that of course only applies for the first iteration. Now I've set the animation to take up 3s to make it a bit slower and not spam as much but It would be neat with a pause in between. Any ideas on how to best achieve this?
This is the code:
.--bounce {
-moz-animation: bounce 3s infinite;
-webkit-animation: bounce 3s infinite;
animation: bounce 3s infinite;
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
Make pause a part of your animation - in the snippet below the actual animation takes 50% of bounce, the rest is pause.
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: lime;
}
.--bounce {
-moz-animation: bounce 6s infinite;
-webkit-animation: bounce 6s infinite;
animation: bounce 6s infinite;
}
#keyframes bounce {
0%,
10%,
25%,
40%,
50% {
transform: translateY(0);
}
20% {
transform: translateY(-30px);
}
30% {
transform: translateY(-15px);
}
}
<div class="box --bounce"></div>
Related
I want the square to start playing the animation for 5s then, stop playing the animation for 3s and then continue. Is this possible only using CSS3?
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 20s;
animation-play-state: running;
animation-iteration-count:infinite;
}
#keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div class="box"></div>
Since animation-duration is 20s, then in the #kayframes, 25% = 5s => 5% = 1s => 15% = 3s (between 25% - 40%)
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation: rotate 20s infinite;
}
#keyframes rotate {
0% {
transform: rotate(0);
}
25% {
transform: rotate(90deg);
}
40% {
transform: rotate(90deg);
}
100%{
transform: rotate(360deg);
}
}
<div class="box"></div>
I have a long image that I want to slide on the screen with a scrolling effect, like on the apple tv's webpage (the floating/scrolling movie covers):
this is the markup i use:
<div class="header">
<div class="slider">
</div>
</div>
and this is the css:
.header{
height: 610px;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.header .slider{
height: 540px;
background: url("../images/header.jpg");
position: relative;
border-left: 10px rgb(34,34,34) solid;
border-bottom: 10px rgb(34,34,34) solid;
border-right: 10px rgb(34,34,34) solid;
left: 0;
top: 60px;
width: 450%;
animation: moveSlideshow 40s linear infinite;
-webkit-animation: moveSlideshow 40s linear infinite;
-moz-animation: moveSlideshow 40s linear infinite;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
here is the css animation:
#keyframes moveSlideshow {
100% {
-webkit-transform: translateX(-300%);
}
}
it occurs that the slideshow is scrolling but for only once and it soon scrolls out of the screen after the entire image is scrolled(and also with some part of the beginning!)..
the image is:
please help
Do You mean something like this?
#keyframes slide-banner {
0% {background-position: 0 0;}
100% {background-position: -300px 0;}
}
#-webkit-keyframes slide-banner {
0% {background-position: 0 0;}
100% {background-position: -300px 0;}
}
#-o-keyframes slide-banner {
0% {background-position: 0 0;}
100% {background-position: -300px 0;}
}
#-moz-keyframes slide-banner {
0% {background-position: 0 0;}
100% {background-position: -300px 0;}
}
.slide-banner {display: block; width:100%; height:100px; animation: slide-banner 2s infinite linear; -webkit-animation: slide-banner 2s infinite linear; -ms-animation: slide-banner 2s infinite linear; -moz-animation: slide-banner 2s infinite linear; -o-animation: slide-banner 2s infinite linear;}
<div class="slide-banner" style="background-image: url(http://www.javatpoint.com/images/javascript/javascript_logo.png);background-repeat: repeat;"></div>
I'm not familiar with the apple tv effect you're referencing, but if you want it to loop over and over you need to add an additional keyframe # 0% with translateX(0); and then use the width of the image in your # 100% translateX();
So if you have a 2000px image your animation would look like :
#keyframes moveSlideshow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-2000px);
}
}
Here's a pen: http://codepen.io/NeilWkz/pen/wWMzwe
(!NOTE: I turned on auto-prefixer as you code was busted in everything but chrome !)
Is it possible to circularly animated this image?
I attempted to animate it by creating a relative parent and setting each image (business solutions div, it solutions div, lifecycle solutions div and education solutions div to absolute). I used this code, #keyframes rotate {
0%{
transform: rotate(0deg); }
100%{
transform: rotate(360deg); }
}
and it rotated in different behavior. They rotated on their own place.
I want to animate it in such a way that: the 4 services will circularly move. Except the outer and inner texts. Thank you in advance.
Here's a quick demo of the general pricipal.
.box {
width: 200px;
height: 200px;
margin: 5em auto;
border: 1px solid grey;
position: relative;
-webkit-animation: spin 10s infinite linear;
animation: spin 10s infinite linear;
}
.object {
position: absolute;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: plum;
top: 25px;
left: 25px;
-webkit-animation: spin 10s infinite reverse linear;
animation: spin 10s infinite reverse linear;
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
<div class="box">
<div class="object">Text</div>
</div>
You will need at least two elements. The static one must have have transparent areas so that it can sit over or behind the rotating div.
To rotate the div:
div.your-rotating-element {
animation-name: rotate-div;
/*enter other styles*/
animation:spin 4s linear infinite;
}
#-moz-keyframes rotate-div { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); } }
#keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
So I'm using code from this link:
http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background
Which contains:
#-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
And it's causing this error:
"Parser Error
Description: An error occurred during the parsing of a resource
required to service this request. Please review the following specific
parse error details and modify your source file appropriately.
Parser Error Message: "-" is not valid at the start of a code block.
Only identifiers, keywords, comments, "(" and "{" are valid.
Source Error:
Line 185: } Line 186: Line 187: #-o-keyframes moveclouds { Line
188: 0% { Line 189: margin-left: 1000px;"
If I remove the "at-rules" it'll work just fine; however, the clouds won't move.
Since Visual Studio's "#" sign indicates the beginning of .net code in a CSHTML file, one needs to double the "#" sign to cancel it out. Like so:
##-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
However, if you add the CSS code in the CSS file, one "#" sign will work, like so:
#-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
in witch file you store the css?
all working fine http://jsfiddle.net/jsbot/cr5g6580/
copy to index.html file
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
and to style.css
/*Lets start with the cloud formation rather*/
/*The container will also serve as the SKY*/
*{ margin: 0; padding: 0;}
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
#clouds{
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
/*Time to finalise the cloud shape*/
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75; /*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
I needed to implement infinite bounce effect using pure CSS, so I referred this site and ended up doing this.
.animated {
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes bounce {
0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);}
50% {-webkit-transform: translateY(-5px);}
}
#keyframes bounce {
0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0);}
50% {transform: translateY(-5px);}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
#animated-example {
width: 20px;
height: 20px;
background-color: red;
position: relative;
top: 100px;
left: 100px;
border-radius: 50%;
}
hr {
position: relative;
top: 92px;
left: -300px;
width: 200px;
}
<div id="animated-example" class="animated bounce"></div>
<hr>
Now, my only problem is the bouncing element takes a longer rest before it starts bouncing again. How can I make it bounce smoothly just like the bounce effect we get by using jQuery.animate?
The long rest in between is due to your keyframe settings. Your current keyframe rules mean that the actual bounce happens only between 40% - 60% of the animation duration (that is, between 1s - 1.5s mark of the animation). Remove those rules and maybe even reduce the animation-duration to suit your needs.
.animated {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translateY(0);
}
50% {
-webkit-transform: translateY(-5px);
}
}
#keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
#animated-example {
width: 20px;
height: 20px;
background-color: red;
position: relative;
top: 100px;
left: 100px;
border-radius: 50%;
}
hr {
position: relative;
top: 92px;
left: -300px;
width: 200px;
}
<div id="animated-example" class="animated bounce"></div>
<hr>
Here is how your original keyframe settings would be interpreted by the browser:
At 0% (that is, at 0s or start of animation) - translate by 0px in Y axis.
At 20% (that is, at 0.5s of animation) - translate by 0px in Y axis.
At 40% (that is, at 1s of animation) - translate by 0px in Y axis.
At 50% (that is, at 1.25s of animation) - translate by 5px in Y axis. This results in a gradual upward movement.
At 60% (that is, at 1.5s of animation) - translate by 0px in Y axis. This results in a gradual downward movement.
At 80% (that is, at 2s of animation) - translate by 0px in Y axis.
At 100% (that is, at 2.5s or end of animation) - translate by 0px in Y axis.
Here is code not using the percentage in the keyframes.
Because you used percentages the animation does nothing a long time.
0% translate 0px
20% translate 0px
etc.
How does this example work:
We set an animation. This is a short hand for animation properties.
We immediately start the animation since we use from and to in the keyframes. from is = 0% and to is = 100%
We can now control how fast it will bounce by setting the animation time: animation: bounce 1s infinite alternate; the 1s is how long the animation will last.
.ball {
margin-top: 50px;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: cornflowerblue;
border: 2px solid #999;
animation: bounce 1s infinite alternate;
-webkit-animation: bounce 1s infinite alternate;
}
#keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}
<div class="ball"></div>
In case you're already using the transform property for positioning your element (as I currently am), you can also animate the top margin:
.ball {
animation: bounce 1s infinite alternate;
-webkit-animation: bounce 1s infinite alternate;
}
#keyframes bounce {
from {
margin-top: 0;
}
to {
margin-top: -15px;
}
}