I have created an infinite animation, which is working well, but sometimes in the animation it's falling back to a step (like a snap back) and continue like nothing.
Link to see it live and this is my CSS / HTML
div#qLpercentage {
bottom: 0;
font-family: 'Open Sans', arial, sans-serif;
font-size: 24px !important;
height: 20px !important;
margin: auto !important;
top: 120px !important;
}
div#qLatelier,
div#qLhammer {
bottom: 0;
color: #FFF;
font-family: 'Open Sans', arial, sans-serif;
font-size: 48px;
height: 48px;
left: 0;
letter-spacing: 0.2em;
margin: auto;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
text-transform: uppercase;
top: 0;
}
div#qLatelier {
bottom: 80px;
font-weight: 300;
}
div#qLhammer {
letter-spacing: 0.37em;
top: 20px;
}
div#qLatelier_text {
animation: movingTop 2s ease-in-out infinite;
-webkit-animation: movingTop 2s ease-in-out infinite;
-o-animation: movingTop 2s ease-in-out infinite;
-ms-animation: movingTop 2s ease-in-out infinite;
}
#keyframes movingTop {
0% {
margin-top: 0;
}
25% {
margin-top: -60px;
}
26% {
margin-top: 60px;
}
50% {
margin-top: 0;
}
100% {
margin-top: 0;
}
}
#-webkit-keyframes movingTop {
0% {
margin-top: 0;
}
25% {
margin-top: -60px;
}
26% {
margin-top: 60px;
}
50% {
margin-top: 0;
}
100% {
margin-top: 0;
}
}
#-o-keyframes movingTop {
0% {
margin-top: 0;
}
25% {
margin-top: -60px;
}
26% {
margin-top: 60px;
}
50% {
margin-top: 0;
}
100% {
margin-top: 0;
}
}
#-ms-keyframes movingTop {
0% {
margin-top: 0;
}
25% {
margin-top: -60px;
}
26% {
margin-top: 60px;
}
50% {
margin-top: 0;
}
100% {
margin-top: 0;
}
}
div#qLhammer_text {
animation: movingBottom 2s ease-in infinite;
-webkit-animation: movingBottom 2s ease-in infinite;
-o-animation: movingBottom 2s ease-in infinite;
-ms-animation: movingBottom 2s ease-in infinite;
}
#keyframes movingBottom {
0% {
margin-top: 0;
}
25% {
margin-top: 60px;
}
26% {
margin-top: -60px;
}
50% {
margin-top: 0;
}
100% {
margin-top: 0;
}
}
#-webkit-keyframes movingBottom {
0% {
margin-top: 0;
}
25% {
margin-top: 60px;
}
26% {
margin-top: -60px;
}
50% {
margin-top: 0;
}
100% {
margin-top: 0;
}
}
#-o-keyframes movingBottom {
0% {
margin-top: 0;
}
25% {
margin-top: 60px;
}
26% {
margin-top: -60px;
}
50% {
margin-top: 0;
}
100% {
margin-top: 0;
}
}
#-ms-keyframes movingBottom {
0% {
margin-top: 0;
}
25% {
margin-top: 60px;
}
26% {
margin-top: -60px;
}
50% {
margin-top: 0;
}
100% {
margin-top: 0;
}
}
<div class="queryloader__overlay" id="qLoverlay" style="position: fixed; width: 100%; height: 100%; background-color: rgb(0, 0, 0); z-index: 666999; top: 0px; left: 0px; transition: opacity 300ms ease 0s;">
<div id="qLatelier">
<div id="qLatelier_text">Atelier</div>
</div>
<div class="queryloader__overlay__percentage" id="qLpercentage" style="height: 40px; width: 100%; position: absolute; font-size: 3em; top: 50%; left: 0px; margin-top: -60px; text-align: center; color: rgb(239, 239, 239);">100%</div>
<div id="qLhammer">
<div id="qLhammer_text">Hammer</div>
</div>
</div>
So I'm wondering why this "bug" and, because it's a loop, this bug doesn't appear every time.
Use translate instead, like: transform: translateY(60px)
Aside: There is no -ms- prefix needed for IE.
Demo Example (Webkit and Non-prefixed)
div#qLpercentage {
bottom: 0;
font-family: 'Open Sans', arial, sans-serif;
font-size: 24px !important;
height: 20px !important;
margin: auto !important;
top: 120px !important;
}
div#qLatelier,
div#qLhammer {
bottom: 0;
color: #FFF;
font-family: 'Open Sans', arial, sans-serif;
font-size: 48px;
height: 48px;
left: 0;
letter-spacing: 0.2em;
margin: auto;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
text-transform: uppercase;
top: 0;
}
div#qLatelier {
bottom: 80px;
font-weight: 300;
}
div#qLhammer {
letter-spacing: 0.37em;
top: 20px;
}
div#qLatelier_text {
-webkit-animation: movingTop 2s ease-in-out infinite;
animation: movingTop 2s ease-in-out infinite;
}
div#qLhammer_text {
-webkit-animation: movingBottom 2s ease-in-out infinite;
animation: movingBottom 2s ease-in-out infinite;
}
#-webkit-keyframes movingTop {
0% {
transform: translateY(60px);
}
25% {
transform: translateY(0);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-60px);
}
100% {
transform: translateY(-60px);
}
}
#-webkit-keyframes movingBottom {
0% {
transform: translateY(-60px);
}
25% {
transform: translateY(0);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(60px);
}
100% {
transform: translateY(60px);
}
}
#keyframes movingTop {
0% {
transform: translateY(60px);
}
25% {
transform: translateY(0);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-60px);
}
100% {
transform: translateY(-60px);
}
}
#keyframes movingBottom {
0% {
transform: translateY(-60px);
}
25% {
transform: translateY(0);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(60px);
}
100% {
transform: translateY(60px);
}
}
<div class="queryloader__overlay" id="qLoverlay" style="position: fixed; width: 100%; height: 100%; background-color: rgb(0, 0, 0); z-index: 666999; top: 0px; left: 0px; transition: opacity 300ms ease 0s;">
<div id="qLatelier">
<div id="qLatelier_text">Atelier</div>
</div>
<div class="queryloader__overlay__percentage" id="qLpercentage" style="height: 40px; width: 100%; position: absolute; font-size: 3em; top: 50%; left: 0px; margin-top: -60px; text-align: center; color: rgb(239, 239, 239);">100%</div>
<div id="qLhammer">
<div id="qLhammer_text">Hammer</div>
</div>
</div>
Thank to #Danko
#keyframes movingBottom {
0% { margin-top : 0; }
25% { margin-top : 60px;opacity:0; }
26% { margin-top : -60px; }
50% { margin-top : 0;opacity:1; }
100% { margin-top : 0; }
}
Hide the element seems to be fine !
I tried the 25.1% too, but this didn't fix the problem.
Related
I'm playing round with CSS animation by trying to replicate the following new google ads logo - example.
What is the best way to add the bounce effect on the green ball?
My current animation:
#keyframes greenblock {
0% {
top: 0px;
}
50% {
top: 45px;
}
100% {
bottom: 0px;
}
}
My code (fiddle):
.wrap {
border: 1px solid red;
height: 300px;
width: 300px;
position: relative
}
.blue-shape {
position: absolute;
left: 100px;
top: 0px;
width: 45px;
height: 45px;
background: #4285F4;
display: block;
border-radius: 45px;
animation: blueblock 2s forwards;
transform-origin: top center;
}
.yellow-shape {
position: absolute;
left: 122px;
top: 0px;
width: 45px;
height: 45px;
background: #FBBC04;
display: block;
border-radius: 45px;
animation: yellowblock 2s forwards;
transform-origin: top center;
}
.green-ball {
position: absolute;
border-radius: 45px;
width: 45px;
height: 45px;
background: #34A853;
animation: greenblock 1.5s forwards;
}
#keyframes blueblock {
0% {
height: 45px;
}
25% {
height: 140px;
transform: rotate(0deg);
}
50% {
transform: rotate(-30deg);
}
100% {
height: 140px;
transform: rotate(-30deg);
}
}
#keyframes yellowblock {
0% {
height: 45px;
opacity: 0;
}
25% {
height: 140px;
transform: rotate(0deg);
opacity: 0;
}
50% {
transform: rotate(30deg);
}
100% {
height: 140px;
transform: rotate(30deg);
opacity: 100;
left: 122px;
}
}
#keyframes greenblock {
0% {
top: 0px;
}
50% {
top: 45px;
}
100% {
bottom: 0px;
}
}
<div class="wrap">
<div class="yellow-shape">
<div class="green-ball">
</div>
</div>
<div class="blue-shape">
</div>
</div>
I've tried with this animation
animation: greenblock .6s ease-in-out .5s forwards;
and this set of keyframes
#keyframes greenblock {
0% { top: 0px; }
75% { top: calc(100% - 55px); }
50%, 100% { top: calc(100% - 45px); }
}
Demo
.wrap {
border: 1px solid red;
height: 300px;
width: 300px;
position: relative
}
.blue-shape {
position: absolute;
left: 100px;
top: 0px;
width: 45px;
height: 45px;
background: #4285F4;
display: block;
border-radius: 45px;
animation: blueblock 2s forwards;
transform-origin: top center;
}
.yellow-shape {
position: absolute;
left: 122px;
top: 0px;
width: 45px;
height: 45px;
background: #FBBC04;
display: block;
border-radius: 45px;
animation: yellowblock 2s forwards;
transform-origin: top center;
}
.green-ball {
position: absolute;
border-radius: 45px;
width: 45px;
height: 45px;
background: #34A853;
animation: greenblock .6s ease-in-out .5s forwards;
}
#keyframes blueblock {
0% {
height: 45px;
}
25% {
height: 140px;
transform: rotate(0deg);
}
50% {
transform: rotate(-30deg);
}
100% {
height: 140px;
transform: rotate(-30deg);
}
}
#keyframes yellowblock {
0% {
height: 45px;
opacity: 0;
}
25% {
height: 140px;
transform: rotate(0deg);
opacity: 0;
}
50% {
transform: rotate(30deg);
}
100% {
height: 140px;
transform: rotate(30deg);
opacity: 100;
left: 122px;
}
}
#keyframes greenblock {
0% { top: 0px; }
75% { top: calc(100% - 55px); }
50%, 100% { top: calc(100% - 45px); }
}
<div class="wrap">
<div class="yellow-shape">
<div class="green-ball">
</div>
</div>
<div class="blue-shape">
</div>
</div>
I'm trying to create an animated text like bellow using css, how can i do this?
I already tried this:
span1 {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
-webkit-animation: move 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
}
#keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
100% {
top: -300px;
}
}
<span1>
web developer<br /> css cowboy<br /> self-facilitating media node<br /> box inside a box<br /> part of the problem
</span1>
but it has a delay after last text that i need to remove!
See This:
*{
box-sizing: border-box;
}
body {
background-color: skyblue;
}
div {
overflow: hidden;
color: #fff;
text-align: center;
font-size: 20px;
position: relative;
height: 100px;
margin-top: 100px;
}
div p {
height: 100px;
animation: move 7s infinite linear;
position: relative;
bottom: -100px;
font-size: 36px;
margin: 0;
}
#keyframes move {
0% {bottom: -100px;}
10%, 20% {bottom: 0px}
40%,50% {bottom: 100px;}
70%,80% {bottom: 200px;}
100% {bottom: 300px}
}
<div>
<p>50% OFF</p>
<p>Some Text</p>
<p>Write by: Ehsan Taghdisi</p>
</div>
.anim1 {
animation: anim1 1.5s infinite;
}
.anim2 {
animation: anim2 1.5s infinite;
}
#keyframes anim1 {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(-10px);
}
}
#keyframes anim2 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(0px);
}
}
<div style="height:40px;overflow:hidden">
<h1 class="anim1">Hello animation 1</h1>
<h1 class="anim2">Hello animation 2</h1>
Update - The pen below has been updated to show the end results.
I am trying to mimic signal animation using css animation but I cant seem to grasp the idea of animation delay. If you look here
http://codepen.io/anon/pen/YwZOmK?editors=110
.real-time-animation {
margin-top: 20px;
position: relative;
transform: scale(0.5) rotate(45deg);
transform-origin: 5% 0%;
}
.real-time-animation>div {
animation: sk-bouncedelay 3s infinite forwards;
}
.circle1 {
animation-delay: 2s;
}
.circle2 {
animation-delay: 1s;
}
#keyframes sk-bouncedelay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.circle {
position: relative;
width: 16em;
height: 16em;
border-radius: 50%;
background: transparent;
border: 20px solid transparent;
border-top-color: darkblue;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.circle2 {
top: 40px;
width: 12em;
height: 12em;
left: 33px;
}
.circle3 {
top: 80px;
width: 8em;
height: 8em;
left: 66px;
}
<div class="real-time-animation">
<div class="circle circle1"> </div>
<div class="circle circle2"> </div>
<div class="circle circle3"> </div>
</div>
You should be able to understand what I am trying to accomplish. I want to start from showing nothing, then after 1 sec show the first bar, then after 1 sec, show the 2nd bar and finally after another 1 sec show the 3rd bar.
My solution:
http://codepen.io/anon/pen/JGWmJg?editors=110
.real-time-animation{
margin-top: 20px;
position: relative;
transform: scale(0.5) rotate(45deg);
transform-origin: 5% 0%;
}
.circle1, .circle2, .circle3{
animation: 4s infinite ease-in;
animation-delay: 1s;
}
.circle1{
animation-name: circle1;
}
.circle2{
animation-name: circle2;
}
.circle3{
animation-name: circle3;
}
#keyframes circle1 {
0%{
opacity: 0;
}
25%{
opacity: 0;
}
50%{
opacity: 0;
}
75%{
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes circle2 {
0%{
opacity: 0;
}
25%{
opacity: 0;
}
50%{
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes circle3 {
0%{
opacity: 0;
}
25%{
opacity: 1;
}
50%{
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
.circle {
position: relative;
width: 16em; height: 16em;
border-radius: 50%;
background: transparent;
border: 20px solid transparent;
border-top-color: darkblue;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.circle2{
top: 40px;
width: 12em;
height: 12em;
left: 33px;
}
.circle3{
top: 80px;
width: 8em;
height: 8em;
left: 66px;
}
You can change the speed of the animation duration: "animation: 4s infinite ease-in;"
As I understand your question animated opacity needs to be like this:
Progress \ Element
.circle1
.circle2
.circle3
0%
0
0
0
25%
0
0
1
50%
0
1
1
75%
1
1
1
100%
0
0
0
The opacity property is clamped which means if you set negative values, it will have the same effect as setting it to 0. The same goes for values larger than 1.
Using this property, we can subtract a constant value from predefined CSS variables and use that as opacity.
.real-time-animation {
zoom: 10;
width: 8px;
height: 8px;
position: relative;
display: inline-block;
}
.real-time-animation>.circle {
animation: circle 4s infinite ease-in;
}
.circle1 {
--circle: 1;
}
.circle2 {
--circle: 2;
}
.circle3 {
--circle: 3;
}
#keyframes circle {
0%, 100% {
opacity: 0;
}
25% {
opacity: calc(var(--circle) - 2);
}
50% {
opacity: calc(var(--circle) - 1);
}
75% {
opacity: 1;
}
}
.circle {
border-radius: 50%;
background: transparent;
border: 1px solid transparent;
border-top-color: darkblue;
position: absolute;
margin: 0;
box-sizing: border-box;
top: 100%;
left: 0%;
width: calc(16px - (var(--circle) - 1)*4px);
height: calc(16px - (var(--circle) - 1)*4px);;
transform: rotate(45deg) translate(-50%, -50%);
transform-origin: 0 0;
}
<div class="real-time-animation">
<div class="circle circle1"> </div>
<div class="circle circle2"> </div>
<div class="circle circle3"> </div>
</div>
I've tried everything from adding extra keyframes (0%, 1%, 100% or 0%, 99%, 100%) to setting -webkit-animation-fill-mode to forwards to the oft-mentioned -webkit-backface-visibility: hidden; trick mentioned in other threads, but I'm still seeing a flicker in my css keyframe animation at the start of almost every animation iteration in Safari 7 (both desktop and iOS). Chrome seems to be flicker-free.
JSBin: http://jsbin.com/julor/2/edit
HTML:
<div class="ripple"></div>
CSS:
body {
background-color: #90CBEA;
}
.ripple, .ripple:before, .ripple:after {
background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .15) 100%);
border-radius: 50%;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}
.ripple:before, .ripple:after {
content: '';
display: block;
}
.ripple {
-webkit-animation-name: innerRipple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
&:before {
-webkit-animation-name: ripple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
}
&:after {
-webkit-animation-name: outerRipple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
}
}
#-webkit-keyframes innerRipple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 200px;
width: 200px;
opacity: 0;
}
}
#-webkit-keyframes ripple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 300px;
width: 300px;
opacity: 0;
}
}
#-webkit-keyframes outerRipple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 340px;
width: 340px;
opacity: 0;
}
}
Adding a frame in between a little earlier than at 99% made the flickering disappear on Safari! (Safari 8 OS X)
#-webkit-keyframes innerRipple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 200px; width: 200px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
#-webkit-keyframes ripple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 300px; width: 300px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
#-webkit-keyframes outerRipple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 340px; width: 340px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
It's my first time experimenting with css3 animations and I have a question regarding the following setup:
Link to codepen
After item3 the animation rewinds to item1. I wonder if it's possible to let follow the item1 after the item3 without this rewinding, so that item3 also moves to the top and item1 slides in from the bottom again, and so on and on?
HTML
<div id="change">
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
CSS
#change {
overflow: hidden;
height: 58px;
color: black;
font-size: 3em;
}
#change span {
position: relative;
display: block;
animation: myAnim 10s ease infinite 0s;
-webkit-animation: myAnim 10s ease infinite 0s;
}
#keyframes myAnim {
0% { top: 0px; }
20% { top: 0px; }
35% { top: -58px; }
55% { top: -58px; }
70% { top: -116px; }
90% { top: -116px; }
100% { top: 0px; }
}
#-webkit-keyframes myAnim {
0% { top: 0px; }
20% { top: 0px; }
35% { top: -58px; }
55% { top: -58px; }
70% { top: -116px; }
90% { top: -116px; }
100% { top: 0px; }
}
Unfortunately, there doesn't seem to be an easy way to do this. If we were using an image, you could easily just take advantage of repeat and force the beginning of the element to start at the end of the element. However, since we aren't using an image, the only solution I can think of would be to use the first element as the last element.
UPDATED EXAMPLE HERE
HTML
<div id="change">
<span>item1</span>
<span>item2</span>
<span>item3</span>
<span>item1</span> <!-- The first element is used as the last element-->
</div>
Modified CSS
#-webkit-keyframes myAnim {
0% { top: 0; }
20% { top: 0; }
35% { top: -58px; }
55% { top: -58px; }
70% { top: -116px; }
90% { top: -116px; }
100% { top: -172px; }
}
it didn't let me rest, so i figured out another solution. with no doubled item1, but the missing part in this is that it doesn't start with the item1 being already there at the beginning.
Link to codepen
HTML
<div id="change">
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
CSS
#change {
overflow: hidden;
height: 58px;
color: black;
font-size: 3em;
position: relative;
}
#change span {
position: absolute;
display: block;
animation: myAnim 9s ease infinite 0s;
-webkit-animation: myAnim 9s ease infinite 0s;
}
#change span:nth-of-type(2) {
animation-delay: 3s;
-webkit-animation-delay: 3s;
top: 58px;
}
#change span:nth-of-type(3) {
animation-delay: 6s;
-webkit-animation-delay: 6s;
top: 58px;
}
#keyframes myAnim {
0% { top: 58px; }
15% { top: 0px; }
33% { top: 0px; }
48% { top: -58px; opacity:1; }
60% { top: -58px; opacity: 0; }
80% { top: 58px; opacity: 0; }
100% { top: 58px; opacity: 1; }
}
#-webkit-keyframes myAnim {
0% { top: 58px; }
15% { top: 0px; }
33% { top: 0px; }
48% { top: -58px; opacity:1; }
60% { top: -58px; opacity: 0; }
80% { top: 58px; opacity: 0; }
100% { top: 58px; opacity: 1; }
}