I'm trying to play with css3 and its animation and keyframe system but i'm running out of idea's to get this to work..
I rely on this animation that I found on codepen, and I would like to reverse the text revealing ('Escape' move to right and 'into amazing experiences' is revealing right to left)
Here is the CSS:
body {
text-align:center;
background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
color:#555;
font-family:'Roboto';
font-weight:300;
font-size:32px;
padding-top:40vh;
height:100vh;
overflow:hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
}
div {
display:inline-block;
overflow:hidden;
white-space:nowrap;
}
div:first-of-type {
animation: showup 7s infinite;
}
div:last-of-type {
width:0px;
animation: reveal 7s infinite;
}
div:last-of-type span {
margin-left:-355px;
animation: slidein 7s infinite;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-800px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width:355px;}
80% {opacity:1;}
100% {opacity:0;width:355px;}
}
I tried a lot of things such as adding float, margin, display or edit the keyframes but nothing did the job. The only remarkable change in this animation is the width div so I don't know how to make it work in a reverse situation.
Hoping someone could help me!
This could be help
body {
text-align: center;
background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
color:#555;
font-weight: 300;
font-size: 32px;
padding-top: 40vh;
height: 100vh;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
div {
display: inline-block;
overflow: hidden;
white-space: nowrap;
font-size: 30px;
line-height: 1.5;
}
div.lr {
width: 0px;
animation: reveal 7s infinite;
}
div.rl {
animation: showup 7s infinite;
}
div.rl span {
margin-left: -355px;
animation: slidein 7s infinite;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-800px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width: 375px;}
80% {opacity:1;}
100% {opacity:0;width: 375px;}
}
<div class="lr">
<span>into amazing experiences</span>
</div>
<div class="rl">Escape</div>
You just need to specify animation-direction and set it to reverse. See more about animation-direction property. Here's codepen with reversed animation.
Related
I am new to CSS animations so I made this little project in which there is a box bouncing and it looks pretty real. I want the text inside the box (at the beginning it is just a 0) to increment by one every time the box bounces/the animation is complete. I tried using a counter but it keeps on resetting.
Here is my code:
* {
font-family: sans-serif;
}
#container {
border-bottom: 3px solid #444;
display: flex;
height: 330px;
width: 100%;
}
#oboing {
align-self: flex-end;
animation-duration: 2s;
animation-iteration-count: infinite;
background-color: black;
height: 200px;
margin: 0 auto 0 auto;
transform-origin: bottom;
width: 200px;
}
#counter::before {
color: white;
position: relative;
left: 40%;
top: 40%;
font-size: 50px;
content: counter(bounceCount);
}
#oboing {
animation-name: oboing;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}
#keyframes oboing {
0% {
transform: scale(1, 1) translateY(0);
counter-reset: bounceCount, calc(counter(bounceCount)+1)
}
10% {
transform: scale(1.1, .9) translateY(0)
}
30% {
transform: scale(.9, 1.1) translateY(-100px);
}
50% {
transform: scale(1.05, .95) translateY(0)
}
57% {
transform: scale(1, 1) translateY(-7px);
}
64% {
transform: scale(1, 1) translateY(0)
}
100% {
transform: scale(1, 1) translateY(0);
counter-increment: bounceCount;
}
}
body {
background: linear-gradient(191deg, #3a22bd, #ea2b0b);
background-size: 400% 400%;
height: 100vh;
overflow: hidden;
-webkit-animation: Colors 4s ease infinite;
-moz-animation: Colors 4s ease infinite;
-o-animation: Colors 4s ease infinite;
animation: Colors 4s ease infinite;
}
#-webkit-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-moz-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-o-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
<div id='container'>
<div id='oboing'>
<span id='counter'>0</span>
</div>
</div>
I am open to any suggestions including CSS, HTML, Jquery, JS, etc...
I would also appreciate it if someone could also explain why their code works... Many times I see answers on this website that have only code and no explaining. Please explain!
By it's definition, counter-increment is a non-animatable css property - that's why you're not being successful in using it in your animation. You would have to use a javascript function to count the bounces. As the animation duration is 2 seconds, one approach would be to use a set-interval approach and increment your counter every 2 seconds.
document.getElementById('counter').innerHTML = 0;
function increment() {
var x = document.getElementById('counter').innerHTML;
//if we declare the x value as 0, it will keep resetting,
//so instead, put we retrieve the initial value from the span
//and set the variable to that value
x++;
//increase by 1
document.getElementById('counter').innerHTML = x; //set span value
}
setInterval(increment, 2000); //1000ms in 1 sec
* {
font-family: sans-serif;
}
#container {
border-bottom: 3px solid #444;
display: flex;
height: 330px;
width: 100%;
}
#oboing {
align-self: flex-end;
animation-duration: 2s;
animation-iteration-count: infinite;
background-color: black;
height: 200px;
margin: 0 auto 0 auto;
transform-origin: bottom;
width: 200px;
}
#counter {
color: white;
position: relative;
left: 40%;
top: 40%;
font-size: 50px;
}
#oboing {
animation-name: oboing;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}
#keyframes oboing {
0% {
transform: scale(1, 1) translateY(0);
}
10% {
transform: scale(1.1, .9) translateY(0)
}
30% {
transform: scale(.9, 1.1) translateY(-100px);
}
50% {
transform: scale(1.05, .95) translateY(0)
}
57% {
transform: scale(1, 1) translateY(-7px);
}
64% {
transform: scale(1, 1) translateY(0)
}
100% {
transform: scale(1, 1) translateY(0);
}
}
body {
background: linear-gradient(191deg, #3a22bd, #ea2b0b);
background-size: 400% 400%;
height: 100vh;
overflow: hidden;
-webkit-animation: Colors 4s ease infinite;
-moz-animation: Colors 4s ease infinite;
-o-animation: Colors 4s ease infinite;
animation: Colors 4s ease infinite;
}
#-webkit-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-moz-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-o-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
<div id='container'>
<div id='oboing'>
<span id='counter'>0</span>
</div>
</div>
Hope this clears things up for you! :)
This question already has an answer here:
left-right movement.. css only very generic
(1 answer)
Closed 2 years ago.
I am animating left position of an absolutely positioned child div within its parent div. The animation though does work but when child div reaches at 50% (50% {left:100%;}, it goes out of its parent's boundary.
A.) Why does it happen only for left: 100% and not for 0%?
B.) How to keep child moving within parent - not going out of parent on right hand side?
Here's my code:
#parent {
border:1px solid red;
width:500px;
height:200px;
margin:100px auto;
position:relative;
}
/* The element to apply the animation to */
#child {
width:100px;
height:100px;
border:1px solid blue;
position:absolute;
-webkit-animation:animatedPos 20s linear infinite;
-o-animation:animatedPos 20s linear infinite;
-moz-animation:animatedPos 20s linear infinite;
animation:animatedPos 20s linear infinite;
}
/* The animation code */
#-webkit-keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
#-o-keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
#-moz-keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
#keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
<div id="parent">
<div id="child"></div>
</div>
Change
#keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
to
*{
box-sizing:border-box;
}
#keyframes animatedPos{
0%{
left:0;
}
50%{
left:calc(100% - 100px);
}
100%{
left:0;
}
}
#parent {
border:1px solid red;
width:500px;
height:200px;
margin:100px auto;
position:relative;
}
#uncle {
border:0px solid silver;
width:400px;
height:200px;
margin:0px auto;
position:absolute;
}
/* The element to apply the animation to */
#child {
width:100px;
height:100px;
border:1px solid blue;
position:absolute;
-webkit-animation:animatedPos 20s linear infinite;
-o-animation:animatedPos 20s linear infinite;
-moz-animation:animatedPos 20s linear infinite;
animation:animatedPos 20s linear infinite;
}
/* The animation code */
#-webkit-keyframes animatedPos {
0% {left:0%;}
50% {right:100%;}
100% {left:0%;}
}
#-o-keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
#-moz-keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
#keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
<div id="parent">
<div id="uncle">
<div id="child"></div>
</div>
</div>
This is a workaround adding other Div(uncle) subtracting the animation Width.
The issue is due to the animation using the axis to move taking only one point in consideration, not the animation Width.
Should be cross-browser.
You should consider the width of the child and reduce it from 50%.
You can set 50% as below. 80% is calculated using width given for parent and child
((500px-100px)/500px)
#keyframes animatedPos {
0% {
left: 0%;
}
50% {
left: 80%;
}
100% {
left: 0%;
}
}
I am mimicking the Windows 10 start up screen. For those of you familiar with the startup, I have the color transitions complete and one set of flickering text ("Hello!"). But I have no idea how to add new sets of text that will flicker following the ("Hello!") Text.
I've tried to research this but have had no success
The final question is how to flicker multiple sets of text one after another
.wrapper {
height: 100%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(124deg, #0095f0, #e81d1d, #0095f0, #0095f0, #1de840, #ff0000, #f0f0f0, #dd00f3, #009900);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 25s ease infinite;
-o-animation: rainbow 25s ease infinite;
animation: rainbow 25s ease infinite;
}
#-webkit-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-moz-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-o-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#Message {
color: #ffffff;
margin-top: 250px;
}
#keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-flicker {
-webkit-animation: flickerAnimation 10s infinite;
-moz-animation: flickerAnimation 10s infinite;
-o-animation: flickerAnimation 10s infinite;
animation: flickerAnimation 10s infinite;
color: #ffffff;
margin-top: 250px;
}
#greet {
font-family: roboto;
font-weight: 150;
font-size: 30px;
}
<div class="wrapper">
<div class="animate-flicker" align="center">
<p id="greet">Hello!</h2>
</div>
</div>
I have translated your question in following requirements:
Show several words consecutively at the same spot.
Apply an animation on each word.
My animation displays an element 10 times for a short period of time and hides it again. animation-delay ensures that the animation on the second word starts after the first animation has finished and the animation on the third word starts after the second animation has finished.
To center words I positioned them absolute. This was necessary because I could not integrate display: inline; or display: none; in the keyframe animation (property display is not animatable).
span {
animation-name: flickerAnimation;
animation-duration: 0.1s;
animation-iteration-count: 10;
position: absolute;
opacity: 0;
left: 0;
right: 0;
text-align: center;
}
span:nth-child(2) {
animation-delay: 1s;
}
span:nth-child(3) {
animation-delay: 2s;
}
#keyframes flickerAnimation {
0% {opacity: 1;}
80% {opacity: 1;}
81% {opacity: 0;}
100% {opacity: 0;}
}
<div class="wrapper">
<span>First</span>
<span>Second</span>
<span>Third</span>
</div>
I am trying to achieve an infinite blink and rotation together, but the problem I face is quite weird, the blinking which should occur at a regular interval of 500ms, happens nicely for a while then disappears and appears back again.
Also I went through lot of questions around blinking but my test case is different. I can't keep the 0% 50% 100% in the keyframes to get the blinking working because I'd want the span to blink at a particular percentage I specify.
For example: I'd want the span to blink at 100deg or 90deg, so I should be able to specify the blink timing by specifying the exact percentage value.
Here's my work so far, any help would be appreciated. http://jsfiddle.net/8UQ8X/7/ (includes vendor prefixes)
<div>
<span></span>
</div>
<style>
div{
position: fixed;
width:3px;
height:100px;
left: 300px;
top: 100px;
border: 1px rgba(255,255,255,0.1) solid;
-webkit-animation: spin 500ms steps(30) infinite;
-webkit-transform-origin: center center;
-webkit-transform: translate3d(0, 0, 0);
}
span{
display:block;
width: 2px;
height: 2px;
border-radius: 50%;
-webkit-animation: blink 500ms infinite steps(1);
}
#-webkit-keyframes spin {
from{
-webkit-transform: rotate(0deg)
}
to{
-webkit-transform: rotate(360deg)
}
}
#-webkit-keyframes blink {
// I should be able to any percentage value to get the span blink at a particular degree.
// for now I am trying to blink the span at 0%, the beginning, later I might change it to 50% or something
0% {background: #fff}
1% {background: none;}
}
body{
background: #232323;
}
</style>
Try this : Animation
.i{
position: fixed;
width:10px;
height:150px;
left: 300px;
top: 100px;
border: 1px rgba(255,255,255,0.1) solid;
-webkit-animation: spin 500ms steps(30) infinite;
-webkit-transform-origin: center center;
-webkit-transform: translate3d(0, 0, 0);
-moz-animation: spin 500ms steps(30) infinite;
-moz-transform-origin: center center;
-moz-transform: translate3d(0, 0, 0);
-webkit-animation-timing-function:ease-in-out;
}
span{
display:block;
width: 10px;
height: 10px;
border: 1px rgba(255,255,255,0.1) solid;
border-radius: 50%;
-webkit-animation: blink 500ms infinite steps(1);
-moz-animation: blink 500ms infinite steps(1);
-webkit-animation-timing-function:liner;
}
#-webkit-keyframes spin {
from{
-webkit-transform: rotate(0deg)
}
to{
-webkit-transform: rotate(360deg)
}
}
#-moz-keyframes spin {
from{
-moz-transform: rotate(0deg)
}
to{
-moz-transform: rotate(360deg)
}
}
#-webkit-keyframes blink {
0% {background: #fff}
1% {background: none;}
}
#-moz-keyframes blink {
0% {background: #fff}
1% {background: none;}
}
body{
background: #232323;
}
Using keyframe animation, the div with an id of "Second" animates slightly before the "first" div starts to. Here is my code shouldn't they move at the same speed by default? any help would be great thanks.
body { background-color: black; color: white;}
#First { width: 200px;
height: 50px;
position: absolute;
top:5px;
color: black;
text-align: center;
background-color: yellow;
-webkit-transform-origin: top;
-webkit-animation: myfirst 1s;
-webkit-transform:rotateX(90deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes myfirst
{
0% {-webkit-transform:rotateX(0deg);}
100% {-webkit-transform:rotateX(90deg);}
}
#Second { width: 200px;
height: 50px;
position: absolute;
top:5px;
left:200px;
color: black;
text-align: center;
background-color: green;
-webkit-transform-origin: bottom;
-webkit-animation: mysecond 1s;
-webkit-transform:rotateX(0deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes mysecond
{
0% {-webkit-transform:rotateX(90deg);}
100% {-webkit-transform:rotateX(0deg);}
}
and the HTML,
<div id="First">FIRST</div>
<div id="Second">SECOND</div>
Code on jsfiddle: http://jsfiddle.net/x3p64/
Demo
#-webkit-keyframes were different for both
As per requirements
New Demo
#-webkit-keyframes myfirst {
0% {
-webkit-transform: scaleY(0);
}
20% {
-webkit-transform: scaleY(0.2);
}
40% {
-webkit-transform: scaleY(0.4);
}
60% {
-webkit-transform: scaleY(0.6);
}
80% {
-webkit-transform: scaleY(0.8);
}
100% {
-webkit-transform: scaleY(1);
}
}
#-webkit-keyframes mysecond {
0% {
-webkit-transform: scaleY(1);
}
20% {
-webkit-transform: scaleY(0.8);
}
40% {
-webkit-transform: scaleY(0.6);
}
60% {
-webkit-transform: scaleY(0.4);
}
80% {
-webkit-transform: scaleY(0.2);
}
100% {
-webkit-transform: scaleY(0);
}
}
It's not that it is starting before, it just looks like it because of the easing properties. Both animations are starting and stopping at the same time, they just look different. Try using a linear easing on both.
-webkit-animation: mysecond 1s linear;