So I'm making a preloader animation which will be a 4 divs with background images crossfading. I'm wanting them nicely crossfaded at 0.6 seconds each but I'm having no luck. They keep overlapping each other too much and it's just a mess. I feel I just need the right percentage or something.
.start_loader .iconfader {
position:absolute;
width: 200px;
height: 200px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 5s;
}
#load-icon1 {
background: url(http://mydomain.com/loader-01.png) no-repeat center center;
background-size: 200px 200px;
}
#load-icon2 {
-webkit-animation-delay: -3s;
background: url(http://mydomain.com/loader-02.png) no-repeat center center;
background-size: 200px 200px;
}
#load-icon3 {
-webkit-animation-delay: -2s;
background: url(http://mydomain.com/loader-03.png) no-repeat center center;
background-size: 200px 200px;
}
#load-icon4 {
-webkit-animation-delay: -1s;
background: url(http://mydomain.com/loader-03.png) no-repeat center center;
background-size: 200px 200px;
}
#-webkit-keyframes fade {
0% {opacity: 0;}
25% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
#keyframes fade {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
I have done this on Codepen. Check this.
No need 4 divs for this. we can do this on single div with CSS3
http://cdpn.io/rFpmx
CODE
<div class="loader anim-1"></div>
<div class="loader anim-2"></div>
CSS
.loader {
height: 80px;
width: 80px;
position: relative;
margin: 100px auto;
}
.loader:after {
content: "";
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
display: block;
height: 80px;
width: 80px;
}
.loader.anim-1:after {
-webkit-animation: fader 2.4s linear infinite;
}
.loader.anim-2:after {
-webkit-animation: fader2 2.4s linear infinite;
}
#-webkit-keyframes fader {
0%, 20%, 100% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/3/000/01f/210/0fedb27.jpg);
}
25%, 45% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/005/025/0d0/3ec916f.jpg);
}
50%, 70% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/000/143/350/1ca561e.jpg);
}
75%, 95% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/8/000/2cb/256/2f5ed8e.jpg);
}
}
#-webkit-keyframes fader2 {
0%, 100% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/3/000/01f/210/0fedb27.jpg);
}
25% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/005/025/0d0/3ec916f.jpg);
}
50% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/000/143/350/1ca561e.jpg);
}
75% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/8/000/2cb/256/2f5ed8e.jpg);
}
}
Related
I'd like to have a wavy background on top of my regular background but the image is not stretching all the way out. It has to be position absolute (otherwise it's interfering with my navigation and moves it down by the height of the img). JSFiddle. I already tried object-fit: fill which also didn't work. Thanks in advance
My code:
* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 5000px;
}
#background {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
object-position: ;
opacity: 15%;
}
#navwrapper {
background: linear-gradient(250deg, #0061ff, #60efff);
background-size: 400% 400%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
height: 100vh;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
<nav id="navwrapper">
<div id="background"><img src="https://i.postimg.cc/RZzwCTQz/Zeichenfla-che-92.png"></div>
</nav>
Instead of applying css to #background apply it in #background img thats where you want to change object fit property.
replace this
#background {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: ;
opacity: 15%;
}
with this
#background img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 15%;
}
You can check the output below
* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 5000px;
}
#background img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: ;
opacity: 15%;
}
#navwrapper {
background: linear-gradient(250deg, #0061ff, #60efff);
background-size: 400% 400%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
height: 100vh;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
<nav id="navwrapper">
<div id="background"><img src="https://i.postimg.cc/RZzwCTQz/Zeichenfla-che-92.png"></div>
</nav>
Use this property
#background{
background:url(...);
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat;
height: 500px;
width:100%
}
You can just set width and height to 100% for an image that it should all space of container:
#background img {
width: 100%;
height: 100%;
}
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! :)
I have created a div which has a gradient background, and I want to change this gradient. I applied a keyframes animation which changed background color instantly. How can I make this change smooth?
div {
width: 100px;
height: 100px;
background:linear-gradient(red, yellow);
animation-name: colorchange;
animation-duration: 5s;
-webkit-animation-name: colorchange;
animation-iteration-count: 5;
-webkit-animation-duration: 5s;
text-align: center;
}
#keyframes colorchange {
0% {background:linear-gradient(red, yellow) }
35% {background:linear-gradient(yellow, green) }
70% {background:linear-gradient(green, red) }
100%{background:linear-gradient(red, yellow)}
}
<div>
Gradient Background
</div>
Try this
div {
text-align: center;
width: 100px;
height: 90px;
color: #fff;
background: linear-gradient(0deg, red, yellow, green);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 50% 0%
}
50% {
background-position: 50% 100%
}
100% {
background-position: 50% 0%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 50% 0%
}
50% {
background-position: 50% 100%
}
100% {
background-position: 50% 0%
}
}
#keyframes Gradient {
0% {
background-position: 50% 0%
}
50% {
background-position: 50% 100%
}
100% {
background-position: 50% 0%
}
}
<div> Text </div>
I might be wrong, but gradients don't support transitions.
There's a workaround I found in other related question:
https://medium.com/#dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
As far as I'm concerned, the smooth transition doesn't work with gradient backgrounds, only with straight colors.
You can create a large gradient background with many colors though, and use the transition to move it. This creates the illusion of the colors changing.
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
<h1>Hello World!</h1>
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>
here is the css3 code I made and it doesnt run on firefox
#keyframes moveobject {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Add vendor prefixes
#-webkit-keyframes moveobject {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
#-moz-keyframes moveobject {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
#keyframes moveobject {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
-webkit-animation: moveobject 5s infinite;
-moz-animation: moveobject 5s infinite;
animation: moveobject 5s infinite;
or use prefixfree by lea verou