I have been trying to create a simple image slider showcasing four images for a website. I have managed to create the slideshow, however the transition between each images is really fast and I want a bit of a fade in effect so that it's smoother. A lot of the questions on here already suggest using jQuery but I am trying to do it with just CSS. I've also explored the animate.css but couldn't get it to work. Appreciate any/all help given. Thanks :)
Heres the code so far:
HTML
<div class="slider">
<div class="feature">
</div>
<div class="overlay">
</div>
</div>
and the CSS
.feature {
animation: slide 3s;
}
.slider {
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 80vh;
animation: slide 10s infinite;
}
.overlay {
color: #fff;
width: 100%;
height: 80vh;
background-color: rgba(0, 0, 0, 0.5);
}
#keyframes slide {
0%{
background-image: url(../resources/feature/Feature1.jpg);
}
25%{
background-image: url(../resources/feature/Feature1.jpg);
}
25.1%{
background-image: url(../resources/feature/Feature2.jpg);
}
50%{
background-image: url(../resources/feature/Feature2.jpg);
}
50.01%{
background-image: url(../resources/feature/Feature3.jpg);
}
75%{
background-image: url(../resources/feature/Feature3.jpg);
}
75.01%{
background-image: url(../resources/feature/Feature4.jpg);
}
100%{
background-image: url(../resources/feature/Feature4.jpg);
}
}
You have to set the opacity and transition of the "sliders" to get the effect.
.feature {
}
.slider {
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 80vh;
transition: all .2s ease-in-out;
animation: slide 10s infinite;
}
.overlay {
color: #fff;
width: 100%;
height: 80vh;
background-color: rgba(0, 0, 0, 0.5);
transition: all .2s ease-in-out;
}
#keyframes slide {
0%{
opacity: 0;
background-color: red;
}
20%{
opacity: 1;
background-color: red;
}
25%{
opacity: 0;
background-color: red;
}
25.1%{
opacity: 0;
background-color: blue;
}
45%{
opacity: 1;
background-color: blue;
}
50%{
opacity: 0;
background-color: blue;
}
50.01%{
opacity: 0;
background-color: yellow;
}
70%{
opacity: 1;
background-color: yellow;
}
75%{
opacity: 0;
background-color: yellow;
}
75.01%{
opacity: 0;
background-color: green;
}
95%{
opacity: 1;
background-color: green;
}
100%{
opacity: 0;
background-color: green;
}
}
<div class="slider">
<div class="feature">
</div>
<div class="overlay">
</div>
</div>
Just change the line
animation: slide 10s infinite;
to
animation: slide 20s infinite;
and it would give some time for transition.
you can try to manege animation Opacity and no any other way to create this slider will show & transition.
#keyframes slide {
0%{
background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);
}
48%{ opacity:0;
}
50%{
opacity:1;
background-image: url(https://images-eu.ssl-images-amazon.com/images/I/51TxXo0RLgL.png);
}
97%{ opacity:1;
98%{ opacity:0;
100%{
opacity:1;
background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);
}
}
https://jsfiddle.net/m4tsudc7/21/
Related
This is the only thing I could think of.
#div {
height: 20px;
width: 20px;
background-color: black;
transition: 1s;
}
#div:hover {
background-color: red;
}
#div:hover {
transition-delay: 2s;
background-color: blue;
}
<div id="div">
</div>
It'll instead ignore the first #div:hover
EDIT:
Alright this seemed to work.
#div:hover {
animation: fade 3s forwards;
}
#keyframes fade {
0%, 66% {background-color: red}
100% {background-color: blue}
}
but how do I make it fade out in reverse?
You can achieve with animation.
#div {
height: 20px;
width: 20px;
background-color: black;
}
#div:hover {
background-color: blue;
animation: delayed 4s forwards;
}
#keyframes delayed {
0% {
background-color: red;
}
50% {
background-color: red;
}
51% {
background-color: blue;
}
100% {
background-color: blue;
}
}
<div id="div">
</div>
The second :hover is overwriting the first and the transition-delay will always be 2 seconds.
I guess you'll need to create an animation for that:
#div {
height: 20px;
width: 20px;
background-color: black;
}
#div:hover {
animation: redtoblue 3s;
animation-fill-mode: forwards;
}
#keyframes redtoblue{
0%, 65.9%{
background-color: red;
}
66%, 100%{
background-color: blue;
}
}
<div id="div">
</div>
I use CSS Pie Timer, and I struggle to make my pie loading animation run only once.
The order I want the animation to be in:
the circle is not shown
the circle is starting to fill up with a border color
the circle get filled fully
the circle stays filled (and doesn't repeat)
Demo here
<div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
</div>
Help will be appreciated!
You just have to remove animation-iteration-count - infinite and add animation-fill-mode as forwards.
Here is the working code
.wrapper {
position: relative;
margin: 40px auto;
background: white;
}
.wrapper, .wrapper * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
width: 250px;
height: 250px;
}
.wrapper .pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
background: #08C;
border: 5px solid rgba(0,0,0,0.5);
}
.wrapper .spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
border-right: none;
animation: rota 5s linear forwards;
}
.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
animation-play-state: running;
}
.wrapper .filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
animation: opa 5s steps(1, end) forwards reverse;
border-left: none;
}
.wrapper .mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
animation: opa 5s steps(1, end) forwards;
}
#keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes opa {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
<div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
</div>
Is there an easy way, using only CSS, to enable background image slideshow?
I have the background image defined as fullscreen and responsive inside the html property in CSS and would like it to have a simple transition effect. The CSS looks like this:
html {
background: url(slike/bg.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Do I need to define it in html and make a new CSS class? The only 'problem' is that the backgrounds need to be fullscreen and responsive.
You can do so by using the container div like this
html,body {
width:100%;
height:100%;
}
body {
margin: 0;
}
.container
{
width:100%;
height:100%;
}
#slideshow {
list-style: none;
margin: 0;
padding: 0;
position: relative;
width:100%;
height:100%;
display: inline-block;
}
.elemnt,.elemnt1,.elemnt2,.elemnt3 {
position: absolute;
left: 0;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
display: inline-block;
text-align: center;
}
span{
border: 1px solid #000;
border-radius: 3px;
box-shadow: 0 0 5px 0 hsla(0,0%,30%, .3);
font-size:4em;
background-color:#fff
}
.elemnt {
animation: xfade 16s 8s infinite;
background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/trek-sahara-sauvage-min.jpg');
}
.elemnt1 {
animation: xfade 16s 6s infinite;
background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/sahara-desert-by-ellie-1024x683.jpg');
}
.elemnt2 {
animation: xfade 16s 2s infinite;
background-image: url('https://pbs.twimg.com/media/C4JYsjcWYAAixfx.jpg');
}
.elemnt3 {
animation: xfade 16s 0s infinite;
background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/trek-sahara-sauvage-min.jpg');
}
#keyframes xfade{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
#keyframes xfade1{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
#keyframes xfade2{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
#keyframes xfade3{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
<div class="container">
<div id="slideshow">
<div class="elemnt"><span>Text Slider 1</span></div>
<div class="elemnt1"><span>Text Slider 2</span></div>
<div class="elemnt2"><span>Text Slider 3</span></div>
<div class="elemnt3"><span>Text Slider 4</span></div>
</div>
</div>
Try this now the slider is using only css you can modify the timing, by changing the animation duration
I try to animate two blocks with css animation. Its have the same transform animation but one of it has background-color animation also. This animations splitted to two #keyframes.
See code (https://codepen.io/mctep/pen/Rgyaep):
<style>
.a {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
animation: a 1s infinite;
}
.b {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: gray;
animation: b 1s infinite;
}
#keyframes a {
0% {
background-color: red;
transform: translateX(0);
}
50% {
background-color: green;
transform: translateX(100px);
}
100% {
background: red;
}
}
#keyframes b {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
}
</style>
<div class="a"></div>
<div class="b"></div>
Animation of colored block is lag from gray block In Google Chrome. In Safary and FF it works perfectly.
I can to make one #keyframes for background and other for transform and it solves problem. But I want to use single value of animation property for single element. If there are no any ways to fix it I'll separate moving and coloring animations.
Why this happens? Is it Google Chrome bug?
Couldn't give you a concrete reason why this happens, but we can un-confuse Chrome by simply specifying a background-color in animation B as well.
#keyframes b {
0% {
background-color: gray; /* add this */
transform: translateX(0);
}
}
.a {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
animation: a 1s infinite;
}
.b {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: gray;
animation: b 1s infinite;
}
#keyframes a {
0% {
background-color: red;
transform: translateX(0);
}
50% {
background-color: green;
transform: translateX(100px);
}
100% {
background: red;
}
}
#keyframes b {
0% {
background-color: gray;
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
}
<div class="a"></div>
<div class="b"></div>
I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here:
http://jsfiddle.net/5pVr4/2/
#-webkit-keyframes MOVE-BG {
from {
background-position: 0% 0%
}
to {
background-position: 187% 0%
}
}
#content {
width: 100%;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
I have been at this for hours and can't find anything that will animate slowly and smoothly at a sub-pixel level. My current example was made from the example code on this page: http://css-tricks.com/parallax-background-css3/
The smoothness of animation I'm after can be seen on this page's translate() example:
http://css-tricks.com/tale-of-animation-performance/
If it can't be done with the background-position, is there a way to fake the repeating background with multiple divs and move those divs using translate?
Checkout this example:
#content {
height: 300px;
text-align: center;
font-size: 26px;
color: #000;
position:relative;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
animation-name: MOVE-BG;
animation-duration: 100s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes MOVE-BG {
from {
transform: translateX(0);
}
to {
transform: translateX(-187%);
}
}
<div id="content">Foreground content
<div class="bg"></div>
</div>
http://jsfiddle.net/5pVr4/4/
Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate.
Here is an example using translate for an infinite slide animation (without prefixes):
http://jsfiddle.net/brunomuller/5pVr4/504/
#-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.wrapper {
position:relative;
width:400px;
height: 300px;
overflow:hidden;
}
.content {
position: relative;
text-align: center;
font-size: 26px;
color: #000;
}
.bg {
width: 200%;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
position:absolute;
top: 0;
bottom: 0;
left: 0;
animation: bg-slide 20s linear infinite;
}
You should adjust your HTML and CSS little bit
Working Demo
HTML
<div id="wrapper">
<div id="page">
Foreground content
</div>
<div id="content"> </div>
</div>
CSS
#-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -2000px; }
}
#wrapper {
position:relative;
width:800px;
height: 300px;
overflow:hidden;
}
#page {
text-align: center;
font-size: 26px;
color: #000;
}
#content {
width: 2000px;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
position:absolute;
top: 0;
left: 0;
z-index:-1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}