I'm struggling to change the animation of my slider, every time I try to change something, the slider disappears. I want a slider right animation instead of fade.
I have researched, but nothing fits what I want.
.slider {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
z-index: -1;
}
.slider .fadeimg {
width: 100%;
height: auto;
position: absolute;
top: 47.5%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: galeria 9s infinite;
clip-path: ellipse(100% 95% at 50% 0%);
}
.fadeimg:nth-child(1) {}
.fadeimg:nth-child(2) {
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.fadeimg:nth-child(3) {
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
#keyframes galeria {
33.33% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="slider">
<img class="fadeimg" src="img/dummy-640x310-1.jpg" alt="">
<img class="fadeimg" src="img/dummy-640x310-2.jpg" alt="">
<img class="fadeimg" src="img/dummy-640x310-3.jpg" alt="">
<div class="gradient"></div>
</div>
Try this:
.slider-container {
width:640px;
overflow:hidden;
}
.slider {
width: 2000px;
height: 100vh;
position: relative;
overflow: hidden;
z-index: -1;
}
.slider .fadeimg {
/*width: 100%;*/
width:auto;
height: auto;
/*position: absolute;
top: 47.5%;
left: 50%;
transform: translate(-50%, -50%);*/
opacity: 1;
animation: galeria 9s infinite;
clip-path: ellipse(100% 95% at 50% 0%);
}
.fadeimg:nth-child(1) {
animation-delay: 0s;
-webkit-animation-delay: 3s;
}
.fadeimg:nth-child(2) {
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.fadeimg:nth-child(3) {
animation-delay: 6s;
-webkit-animation-delay: 3s;
}
#keyframes galeria {
0% {
/*opacity: 1;*/
transform: translate(0%,0%);
}
50% {
transform: translate(-100%,0%);
}
100% {
transform: translate(-200%,0%);
}
}
<div class="slider-container">
<div class="slider">
<img class="fadeimg" src="https://dummyimage.com/640x310/0000ff/fff" alt="">
<img class="fadeimg" src="https://dummyimage.com/640x310/ff0000/fff" alt="">
<img class="fadeimg" src="https://dummyimage.com/640x310/00ff00/fff" alt="">
<div class="gradient"></div>
</div>
</div>
Related
I've made a small Image animation where images changes opacity over time.It works smoothly but when last image gets to 100% it jumps straight to 0% without any transition.
I have already tried animation-direction: alternate for third image and delay for all image but it does not work for me. Delay works only first step of animation cycle after it delay becomes 0 for all.
Here is my CSS
.rightside .img-container img.first {
animation-name: first-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
/* animation-delay: -10s; */
}
.rightside .img-container img.second {
position: absolute;
top: 0;
animation-name: second-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.rightside .img-container img.third {
position: absolute;
top: 0;
animation-name: final-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* animation-direction: alternate; */
}
#keyframes first-image {
0% {
opacity: 0;
}
33.3% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes second-image {
0% {
opacity: 0;
}
33.3% {
opacity: 0;
}
67% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes final-image {
0% {
opacity: 0;
}
33.3% {
opacity: 0;
}
67% {
opacity: 0;
}
100% {
opacity: 1;
}
}
HTML
<div class="img-container">
<img src="Images/Apple.png" class="first turn" alt="Image Here" />
<img src="Images/Bee.png" class="second" alt="Image Here" />
<img src="Images/Cat.png" class="third" alt="Image Here" />
</div>
The clasical aproach to this would be just using different delays:
div {
animation-name: all;
animation-duration: 9s;
animation-iteration-count: infinite;
width: 100px;
height: 100px;
background-color: yellow;
}
.first {
animation-delay: -3s;
background-color: lightgreen;
}
.third {
animation-delay: -6s;
background-color: lightblue;
}
#keyframes all {
0% {
opacity: 0;
}
33.3% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
I am trying to make something like this:
but the ball doesn't seem to pass through the ring, but rather passes across the ring. How can I fix this issue?
body {
height: 50em;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9
}
#keyframes spinner {
0% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>
I would create the ring using two elements (the bottom and the top part) to be able to adjust the z-index of each one differently:
.ring {
margin-top:80px;
position: relative;
width: 200px;
height: 100px;
}
.ring:before,
.ring:after{
content:"";
position:absolute;
left:0;
right:0;
height:100%;
border: 10px solid #ffcf82;
border-radius:50%;
box-sizing:border-box;
}
.ring:before {
z-index:-1;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.ring:after {
z-index:1;
clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
}
#keyframes spinner {
0%,50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-300px);
}
}
.ring:before,
.ring:after{
animation: spinner infinite alternate 4s;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 60px 80px;
position:relative;
z-index:0;
animation: translate 8s infinite linear;
}
<div class="ring"></div>
<div class="ball"></div>
Another idea in case you need better support than clip-path. The trick is to play with transparent color:
.ring {
margin-top:80px;
position: relative;
width: 200px;
height: 100px;
}
.ring:before,
.ring:after{
content:"";
position:absolute;
left:0;
right:0;
height:100%;
border: 10px solid #ffcf82;
border-radius:50%;
box-sizing:border-box;
}
.ring:before {
z-index:-1;
}
.ring:after {
z-index:1;
border-bottom-color:transparent;
border-right-color:transparent;
}
#keyframes spinner {
0%,50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
#keyframes translate {
0% {
transform: translateY(10px);
}
50% {
transform: translateY(-310px);
}
}
.ring:before,
.ring:after{
animation: spinner infinite alternate 4s;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 60px 80px;
position:relative;
z-index:0;
animation: translate 8s infinite linear;
}
<div class="ring"></div>
<div class="ball"></div>
You can try to change z-index of ball inside of animation
body {
height: 50em;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9
}
#keyframes spinner {
0% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
z-index: 10;
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
position: relative;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>
You can use a 3d transform to get automatically this effect.
Rotate the circle in the X axis. Then, there is one part of it that is behind the plane, and another part that is in front of it. The ball is still in the 0 z plane, so it will naturally appear to cross through the circle:
body {
height: 50em;
transform-style: preserve-3d;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9;
margin-top: 100px;
transform: rotateX(50deg) rotateY(0deg) ;
transform-style: preserve-3d;
}
#keyframes spinner {
0%, 30% {
transform: rotateX(50deg) rotateY(0deg);
}
60%, 100% {
transform: rotateX(50deg) rotateY(180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>
I have a down arrow with rings in a ripple effect around it. The down arrow click doesn't work with the rings around it, but if I remove the rings, the click function works normally.
This is the webpage: https://rimildeyjsr.github.io/St.Anthony-Website/
Any ideas how to fix it?
CSS:
body{
background: red;
}
.down-arrow {
display: none;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
z-index: 5;
border-radius: 50%;
height: 80px;
width: 80px;
}
.ring {
border: 2.5px solid white;
-webkit-border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
left:0;
right: 0;
top:50%;
z-index: 5;
margin: 0 auto;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
opacity: 0.0;
}
.ring2 {
-webkit-animation-delay: 1.4s;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0,0); opacity: 1;}
100% {-webkit-transform: scale(1.2,1.2); opacity: 0;}
}
HTML:
<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown">
<div class="ring"></div>
<div class="ring ring2"></div>
add z-index some higher value will solve the problem
body{
background: red;
}
.down-arrow {/*
display: none;*/
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
z-index: 15;
border-radius: 50%;
height: 80px;
width: 80px;
}
.ring {
border: 2.5px solid white;
-webkit-border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
left:0;
right: 0;
top:50%;
z-index: 5;
margin: 0 auto;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
opacity: 0.0;
}
.ring2 {
-webkit-animation-delay: 1.4s;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0,0); opacity: 1;}
100% {-webkit-transform: scale(1.2,1.2); opacity: 0;}
}
<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown">
<div class="ring"></div>
<div class="ring ring2"></div>
Credit to #nevermind
I have a clock face of circles that I want to appear in order after 1 sec, so grow the first one to full size from zero, then after 1 sec, the second, then after 1 sec, the third etc etc. (the circle needs to expand centrally)
This is my circle (there will be 12 in total like this):
<div id="research-area">
<a class="research-circle rs-<?php echo $counter; ?>" href="<?php echo the_permalink(); ?>" style="background-image:url(<?php echo the_field('icon'); ?>);"></a>
</div>
There's a counter on each circle class outputting 1,2,3 etc up to 12.
How do I sequentially expand each circle using CSS? At the moment each circle just expands from the top left, all at the same time!
#research-area {
height: 883px;
width: 980px;
position: relative;
}
.research-circle {
height: 156px;
width: 174px;
display: block;
position: absolute;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.research-circle:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.research-circle {
-webkit-animation: circle 1s;
-moz-animation: circle 1s;
-o-animation: circle 1s;
animation: circle 1s;
}
#keyframes circle {
0% {
height: 0px;
width: 0px;
}
100% {
height: 156px;
width: 174px;
}
}
#-webkit-keyframes circle {
0% {
height: 0px;
width: 0px;
}
100% {
height: 156px;
width: 174px;
}
}
#-moz-keyframes circle {
0% {
height: 0px;
width: 0px;
}
100% {
height: 156px;
width: 174px;
}
}
#-o-keyframes circle {
0% {
height: 0px;
width: 0px;
}
100% {
height: 156px;
width: 174px;
}
}
#keyframes circle {
0% {
height: 0px;
width: 0px;
}
100% {
height: 156px;
width: 174px;
}
}
.rs-1 {
left: 393px;
top: -2px;
}
.rs-2 {
left: 578px;
top: 47px;
}
.rs-3 {
left: 713px;
top: 183px;
}
.rs-4 {
left: 763px;
top: 367px;
}
.rs-5 {
left: 713px;
top: 551px;
}
.rs-6 {
left: 578px;
top: 687px;
}
.rs-7 {
left: 394px;
top: 736px;
}
.rs-8 {
top: 687px;
left: 209px;
}
.rs-9 {
left: 73px;
top: 551px;
}
.rs-10 {
left: 24px;
top: 367px;
}
.rs-11 {
left: 74px;
top: 182px;
}
.rs-12 {
left: 208px;
top: 47px;
}
Here is a sample using 4 circles. All you have to do is add an animation-delay that is equivalent to the amount of time that will be required for the previous elements to complete the animation. So, first circle should have no animation delay, second should have 1s delay, third should have 2s delay and so on (because the animation-duration for each cycle is 1s).
.research-circle {
display: inline-block;
height: 50px;
width: 50px;
border-radius: 50%;
border: 2px solid;
text-align: center;
text-decoration: none;
line-height: 50px;
animation: scale 1s linear 1 backwards;
}
.rs-1 {
animation-delay: 0s;
}
.rs-2 {
animation-delay: 1s;
}
.rs-3 {
animation-delay: 2s;
}
.rs-4 {
animation-delay: 3s;
}
#keyframes scale {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="research-area">
<a class="research-circle rs-1" href="#">1</a>
<a class="research-circle rs-2" href="#">2</a>
<a class="research-circle rs-3" href="#">3</a>
<a class="research-circle rs-4" href="#">4</a>
</div>
In the above version, each circle starts its animation immediately after the previous one completes its own animation. If you need a delay of 1s between the completion of animation for one element to the start of animation for the next then just increase the animation-delay like in the below snippet.
The logic for calculation of animation-delay is pretty simple. For each element,
animation-delay = (n-1) * (animation-duration + animation-delay), where n is its index.
.research-circle {
display: inline-block;
height: 50px;
width: 50px;
border-radius: 50%;
border: 2px solid;
text-align: center;
text-decoration: none;
line-height: 50px;
animation: scale 1s linear 1 backwards;
}
.rs-1 {
animation-delay: 0s;
}
.rs-2 {
animation-delay: 2s;
}
.rs-3 {
animation-delay: 4s;
}
.rs-4 {
animation-delay: 6s;
}
.rs-5 {
animation-delay: 8s;
}
.rs-6 {
animation-delay: 10s;
}
.rs-7 {
animation-delay: 12s;
}
.rs-8 {
animation-delay: 14s;
}
.rs-9 {
animation-delay: 16s;
}
.rs-10 {
animation-delay: 18s;
}
.rs-11 {
animation-delay: 20s;
}
.rs-12 {
animation-delay: 22s;
}
#keyframes scale {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="research-area">
<a class="research-circle rs-1" href="#">1</a>
<a class="research-circle rs-2" href="#">2</a>
<a class="research-circle rs-3" href="#">3</a>
<a class="research-circle rs-4" href="#">4</a>
<a class="research-circle rs-5" href="#">5</a>
<a class="research-circle rs-6" href="#">6</a>
<a class="research-circle rs-7" href="#">7</a>
<a class="research-circle rs-8" href="#">8</a>
<a class="research-circle rs-9" href="#">9</a>
<a class="research-circle rs-10" href="#">10</a>
<a class="research-circle rs-11" href="#">11</a>
<a class="research-circle rs-12" href="#">12</a>
</div>
I currently have 4 images and I use the CSS animation to reveal a different picture every X seconds. The problem is that I'd like to put an unique text for each image. For example, for the first image, "First Image", for the second, "Second Image", etc.
Here is my HTML code:
<div class="wrapper">
<div id="container">
<h1 id="all-available-styles">All available styles</h1>
<div id="all-available-styles-block">
<img src="images/test.jpg" alt="">
<img src="images/test2.jpg" alt="">
<img src="images/test3.jpg" alt="">
<img src="images/test4.jpg" alt="">
</div>
</div>
</div>
My CSS:
#welcome-to
{
text-align: center;
margin: 0 auto 15px auto;
width: 75%;
}
#all-available-styles
{
text-align: center;
margin-bottom: 25px;
}
#all-available-styles:before, #all-available-styles:after
{
content: "\f122";
display: inline-block;
position: relative;
top: 10px;
}
#all-available-styles:before
{
transform: rotate(250deg);
-webkit-transform: rotate(250deg);
-ms-transform: rotate(250deg);
-moz-transform: rotate(250deg);
margin-right: 5px;
}
#all-available-styles:after
{
margin-left: 5px;
transform: rotate(100deg) scaleX(-1);
-webkit-transform: rotate(100deg) scaleX(-1);
-ms-transform: rotate(100deg) scaleX(-1);
-moz-transform: rotate(100deg) scaleX(-1);
}
#all-available-styles-block
{
position: relative;
height: 281px;
}
#all-available-styles-block img
{
background-color: #FFFFFF;
margin: 0 auto;
padding: 2px;
position: absolute;
right: 0;
left: 0;
animation: allAvailableStylesBlockFadeInOut ease-in-out infinite 8s;
-webkit-animation: allAvailableStylesBlockFadeInOut ease-in-out infinite 8s;
box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
width: 50%;
pointer-events: none;
}
#keyframes allAvailableStylesBlockFadeInOut
{
0%
{
opacity: 1;
}
17%
{
opacity: 1;
}
25%
{
opacity: 0;
}
92%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
#-webkit-keyframes allAvailableStylesBlockFadeInOut
{
0%
{
opacity: 1;
}
17%
{
opacity: 1;
}
25%
{
opacity: 0;
}
92%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
#-moz-keyframes allAvailableStylesBlockFadeInOut
{
0%
{
opacity: 1;
}
17%
{
opacity: 1;
}
25%
{
opacity: 0;
}
92%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
#-o-keyframes allAvailableStylesBlockFadeInOut
{
0%
{
opacity: 1;
}
17%
{
opacity: 1;
}
25%
{
opacity: 0;
}
92%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
#all-available-styles-block img:nth-of-type(1)
{
animation-delay: 6s;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
}
#all-available-styles-block img:nth-of-type(2)
{
animation-delay: 4s;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
}
#all-available-styles-block img:nth-of-type(3)
{
animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
}
#all-available-styles-block img:nth-of-type(4)
{
animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
}
Result: http://screencast.com/t/WPcf8X2b7z
So for each image, a text in the middle. I think I can do it with a :before or :after, but I did find the solution.
Thanks to people who will try to help me.
Check this:
http://jsfiddle.net/DariuszMusielak/qzrrqryd/
<div class="wrapper">
<div id="container">
<h1 id="all-available-styles">All available styles</h1>
<div id="all-available-styles-block">
<div class='image'>
<img src="http://marcisischo.com/wp-content/uploads/2014/12/TrollFace.png" alt="">
<p> nice troll face 1</p>
</div>
<div class='image'>
<img src="http://img4.wikia.nocookie.net/__cb20130116153004/uncyclopedia/images/c/cb/Internet-troll-face-explorer.png" alt="">
<p> nice troll face 2</p>
</div>
<div class='image'>
<img src="http://www.clipartbest.com/cliparts/dT6/MEb/dT6MEbgEc.gif" alt="">
<p> nice troll face 3</p>
</div>
<div class='image'>
<img src="http://fc02.deviantart.net/fs70/f/2011/074/f/f/kirby_troll_face_by_arashi93_sama-d3bqrxs.jpg" alt="">
<p> nice troll face 4</p>
</div>
</div>
</div>
</div>
Move images and text inside div, and add anima