I have an accordion slider. which is using CSS3 is their a way to make the slider auto rotate with out using jquery but only with pure css3 animations?
Here is the URL to my site.
Like this?
http://jsfiddle.net/coma/bXDHE/30/
HTML
<div class="neat">
<div>
<img src="http://www.menucool.com/slider/prod/image-slider-4.jpg"/>
<img src="http://blogs.mathworks.com/pick/files/zebrainpastelfield.png"/>
<img src="http://www.freewarepocketpc.net/wp7/img/image-effecter-free.png"/>
<img src="http://www.poyraz.gen.tr/wp-content/uploads/images_4781_1.jpg"/>
</div>
</div>
CSS
div.neat {
font-size: 500px;
width: 1em;
height: 200px;
overflow: hidden;
}
div.neat > div {
position: relative;
left: 0;
width: 4em;
-webkit-animation: loop 10s infinite;
-moz-animation: loop 10s infinite;
}
div.neat > div > img {
width: 1em;
display: block;
float: left;
}
#-webkit-keyframes loop {
0% { left: 0; }
20% { left: 0; }
25% { left: -1em; }
45% { left: -1em; }
50% { left: -2em; }
70% { left: -2em; }
75% { left: -3em; }
95% { left: -3em; }
}
#-moz-keyframes loop {
0% { left: 0; }
20% { left: 0; }
25% { left: -1em; }
45% { left: -1em; }
50% { left: -2em; }
70% { left: -2em; }
75% { left: -3em; }
95% { left: -3em; }
}
Related
So I got my right sidebar animating nicely coming in, but how would I animate out as of right now it just closing without any animation?
.calendarQuickpanelContainer {
animation: animateopen 0.6s;
bottom: 0;
display: none;
position: fixed;
top: 0;
right: 0;
width: 462px;
z-index: 100;
}
.calendarQuickpanel {
display: block;
}
#keyframes animateopen {
0% {
right: -462px;
opacity: 0;
}
100% {
right: 0;
opacity: 1;
}
}
Thanks
Animation is not very good, better use transition here. You have better control because you can use a class to toggle states.
function toggleFunction() {
var element = document.getElementById("sidebar");
element.classList.toggle("active");
}
#sidebar {
background: lightblue;
width: 250px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
transform: translateX(-260px);
opacity: 0;
transition: transform 1s, opacity 1s;
}
#sidebar.active {
transform: translateX(0px);
opacity: 1;
}
button {
float: right;
margin: 32px;
}
<div id="sidebar">
</div>
<button onclick="toggleFunction()">toggle sidebar</button>
I'm working on a css text slider animation. It originally had 5 items but I've removed one so now there are 4.
I'm having trouble with the keyframe calculations. There is a bit of a pause when the last item slides out and the first item slides back in again. It was all working fine when it had 5 items but removing one has affected the timings.
HTML:
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote"> Service to 200+ countries</div>
</li>
<li class="anim2">
<div class="quote">Same day delivery services</div>
</li>
<li class="anim3">
<div class="quote">Easy booking tools.</div>
</li>
<li class="anim4">
<div class="quote">Rated great.</div>
</li>
</ul>
</div>
</div>
</div>
CSS:
html,
body {
font-family: 'Droid Serif', serif;
}
h1 {
font-size: 60px;
text-align: center;
}
.content-slider {
width: 100%;
height: 360px;
}
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
right: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
text-align:center;
}
.slider li.anim1 {
animation: cycle 12s linear infinite;
}
.slider li.anim2 {
animation: cycle2 12s linear infinite;
}
.slider li.anim3 {
animation: cycle3 12s linear infinite;
}
.slider li.anim4 {
animation: cycle4 12s linear infinite;
}
#keyframes cycle {
0% {
right: 0px;
}
4% {
right: 0px;
}
16% {
right: 0px;
opacity: 1;
z-index: 0;
}
20% {
right: 325px;
opacity: 0;
z-index: 0;
}
21% {
right: -325px;
opacity: 0;
z-index: -1;
}
50% {
right: -325px;
opacity: 0;
z-index: -1;
}
92% {
right: -325px;
opacity: 0;
z-index: 0;
}
96% {
right: -325px;
opacity: 0;
}
100% {
right: 0px;
opacity: 1;
}
}
#keyframes cycle2 {
0% {
right: -325px;
opacity: 0;
}
16% {
right: -325px;
opacity: 0;
}
20% {
right: 0px;
opacity: 1;
}
24% {
right: 0px;
opacity: 1;
}
36% {
right: 0px;
opacity: 1;
z-index: 0;
}
40% {
right: 325px;
opacity: 0;
z-index: 0;
}
41% {
right: -325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle3 {
0% {
right: -325px;
opacity: 0;
}
36% {
right: -325px;
opacity: 0;
}
40% {
right: 0px;
opacity: 1;
}
44% {
right: 0px;
opacity: 1;
}
56% {
right: 0px;
opacity: 1;
z-index: 0;
}
60% {
right: 325px;
opacity: 0;
z-index: 0;
}
61% {
right: -325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle4 {
0% {
right: -325px;
opacity: 0;
}
56% {
right: -325px;
opacity: 0;
}
60% {
right: 0px;
opacity: 1;
}
64% {
right: 0px;
opacity: 1;
}
76% {
right: 0px;
opacity: 1;
z-index: -1;
}
80% {
right: 325px;
opacity: 0;
z-index: -1;
}
81% {
right: -325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
It's the final cycle4 animation that I've tried tweaking but I can't get the smooth transition from last to first working as it was.
Here's a codepen example
If you want your animation to remain 12s long then you need to realise that with 4 items, each item has 3s worth of animation time, and that every 1s of the animation is 8.33333% of the total animation time.
If you struggle visualising this kind of thing I'd advise setting up a spreadsheet or something to do the calculations:
You can then easily see the percentages of your keyframes as you change parameters such as the animation length and in/out time. Anyway, here's the snippet:
html,
body {
font-family: 'Droid Serif', serif;
}
h1 {
font-size: 60px;
text-align: center;
}
.content-slider {
width: 100%;
height: 360px;
}
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
right: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
text-align: center;
}
.slider li.anim1 {
animation: cycle 12s linear infinite;
}
.slider li.anim2 {
animation: cycle2 12s linear infinite;
}
.slider li.anim3 {
animation: cycle3 12s linear infinite;
}
.slider li.anim4 {
animation: cycle4 12s linear infinite;
}
#keyframes cycle {
0% {
right: -325px;
opacity: 0;
z-index: -1;
}
4.2% {
right: 0px;
opacity: 1;
z-index: 0;
}
20.8% {
right: 0px;
opacity: 1;
}
25% {
right: 325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
}
}
#keyframes cycle2 {
0% {
right: -325px;
opacity: 0;
}
25% {
right: -325px;
opacity: 0;
}
29.2% {
right: 0px;
opacity: 1;
}
45.8% {
right: 0px;
opacity: 1;
}
50% {
right: 325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle3 {
0% {
right: -325px;
opacity: 0;
}
50% {
right: -325px;
opacity: 0;
}
54.2% {
right: 0px;
opacity: 1;
}
70.8% {
right: 0px;
opacity: 1;
}
75% {
right: 325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle4 {
0% {
right: -325px;
opacity: 0;
}
74.99% {
right: -325px;
opacity: 0;
}
79.2% {
right: 0px;
opacity: 1;
}
95.8% {
right: 0px;
opacity: 1;
}
100% {
right: 325px;
opacity: 0;
z-index: -1;
}
}
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote"> Service to 200+ countries</div>
</li>
<li class="anim2">
<div class="quote">Same day delivery services</div>
</li>
<li class="anim3">
<div class="quote">Easy booking tools.</div>
</li>
<li class="anim4">
<div class="quote">Rated great.</div>
</li>
</ul>
</div>
</div>
</div>
Inspired by this tutorial http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/ I decided to make pure css version of similar effect.
And it looks good and work pretty smooth. What bothers me is why after few attempts I had to set keyframes at 24% and 74% instead of 50%? With 50% animation looks choppy. I really don't like to do things blindfolded, so I'll be grateful for help.
Here is quick dirty implementation:
html {
background: #ccc;
}
.card {
position: relative;
display: inline-block;
height: 400px;
width: 200px;
background: #000;
margin: 50px;
overflow: hidden;
}
.card-head {
position: absolute;
background: #000;
height: 400px;
width: 400px;
border-radius: 50%;
left: -100px;
top: -173px;
z-index: 10;
-webkit-animation-name: carda;
animation-name: carda;
}
.card-extend {
position: absolute;
background: #fff;
height: 400px;
width: 400px;
bottom: -200px;
left: -100px;
z-index: 5;
-webkit-animation-name: cardb;
animation-name: cardb;
}
.card-animated {
-webkit-animation-duration: .2s;
animation-duration: .2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
}
.card:hover .card-head,
.card:focus .card-head{
-webkit-animation-name: cardhovera;
animation-name: cardhovera;
}
.card:hover .card-extend,
.card:focus .card-extend{
-webkit-animation-name: cardhoverb;
animation-name: cardhoverb;
}
#-webkit-keyframes carda {
from {
border-radius: 0%;
top: -320px;
z-index: 2;
}
24% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 50%;
top: -173px;
}
}
#keyframes carda {
from {
border-radius: 0%;
top: -320px;
z-index: 2;
}
24% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 50%;
top: -173px;
}
}
#-webkit-keyframes cardhovera {
from {
border-radius: 50%;
top: -173px;
}
76% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 0%;
top: -320px;
z-index: 2;
}
}
#keyframes cardhovera {
from {
border-radius: 50%;
top: -173px;
}
76% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 0%;
top: -320px;
z-index: 2;
}
}
#-webkit-keyframes cardb {
from {
bottom: -53px;
border-radius: 50%;
}
76% {
bottom: -200px;
border-radius: 25%;
}
to {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
}
#keyframes cardb {
from {
bottom: -53px;
border-radius: 50%;
}
76% {
bottom: -200px;
border-radius: 25%;
}
to {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
}
#-webkit-keyframes cardhoverb {
from {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
24% {
bottom: -200px;
border-radius: 25%;
}
to {
bottom: -53px;
border-radius: 50%;
}
}
#keyframes cardhoverb {
from {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
24% {
bottom: -200px;
border-radius: 25%;
}
to {
bottom: -53px;
border-radius: 50%;
}
}
<div tabindex="0" class="card">
<div class="card-head card-animated">
</div>
<div class="card-extend card-animated">
</div>
</div>
I think this choppy effect you are talking about has more to do with the way animation in css work. As the easing is applied to the whole extension of it, this means, imagine some keyframes like this:
#keyframes exampleFrames {
0% {
transform: translateX(50px)
}
50% {
transform: translateX(0)
}
100% {
transform: translateX(50px)
}
}
Even though you can add easing to the animation the element affected will start at 50 pixels to the right and start moving to the left to it's initial position and in the center frame will suddenly change direction to get to the last position again. The issue is with this sudden change, this is what makes it choppy.
To avoid this you might need to use javascript or, as you've seen tweak the keyframes to minimise this undesirable visual effect.
I've found this video from the Google style guide
http://material-design.storage.googleapis.com/videos/components-progressandactivity-progressandactivity-_20spec.linear_large_xhdpi.mp4
at this page
http://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators
I like the way the progress is shown. Does anybody know, if there is an implementation with CSS3 around? I tried it myself, but this is the closest I've come so far for the second progress bar:
http://plnkr.co/edit/v4jcJlpusKqEK3AySOBZ?p=preview
<div class="spinner">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
</div>
And here is the CSS as SCSS:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#-ms-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
#mixin animation($animation) {
-webkit-animation: #{$animation};
-moz-animation: #{$animation};
-ms-animation: #{$animation};
animation: #{$animation};
}
$spinner-height: 7px;
$green: #8bc34a;
.spinner {
position: relative;
width: 100%;
height: $spinner-height;
opacity: 1;
background-color: lighten($green, 25%);
overflow: hidden;
.bar {
height: $spinner-height;
background-color: $green;
position: absolute;
}
.bar1 {
left: 50%;
width: 10%;
#include animation(bar1 7s infinite linear);
}
.bar2 {
left: 0%;
width: 0%;
#include animation(bar2 7s infinite);
}
}
#include keyframes(bar1) {
0% { width: 0%; left: 0%; }
10% { width: 30%; left: 100%; }
19.99% { width: 30%; left: 100%; }
20% { width: 0%; left: 0%; }
30% { width: 80%; left: 100%; }
30.01% { width: 0%; left: 0%; }
40% { width: 5%; left: 30%; }
50% { width: 50%; left: 100%; }
50.01% { width: 0%; left: 0%; }
60% { width: 60%; left: 20%; }
70% { width: 5%; left: 100%; }
70.01% { width: 0%; left: 0%; }
80% { width: 50%; left: 30%; }
90% { width: 10%; left: 80%; }
100% { width: 20%; left: 100%; }
}
#include keyframes(bar2) {
0% { width: 0%; left: 0%; }
10% { width: 60%; }
19.99% { width: 40%; left: 100%; }
20% { width: 0%; left: 0%; }
25% { width: 10%; left: 10%; }
30% { width: 40%; left: 30%; }
40% { width: 60%; left: 100%; }
40.01% { width: 0%; left: 0%; }
50% { width: 10%; left: 40%; }
60% { width: 30%; left: 100%; }
60.01% { width: 0%; left: 0%; }
70% { width: 10%; left: 40%; }
80% { width: 5%; left: 100%; }
80.01% { width: 0%; left: 0%; }
90% { width: 70%; left: 10%; }
100% { width: 10%; left: 100%; }
}
Maybe someone can help me to come closer to this animation.
With one div class .loading, here's a possible answer to the second one (you'll need to prefix the animations / transitions)
.loading{
width:90%;
margin:0 auto;
height:8px;
background-color:lightblue;
position:relative;
transition: all 300ms ease-in-out;
}
.loading:hover{
height:20px;
}
.loading:before, .loading:after{
content:"";
display:block;
height:100%;
position:absolute;
background-color:blue;
animation:motion 2s infinite ease;
border-radius:3px;
}
.loading:after{
animation-delay:600ms;
}
#keyframes motion{
0% {left:0; width:0;}
20% {left:20%; width:60%;}
40% {left:30%; width:20%;}
60% {left:60%; width:10%;}
80% {left:70%; width:30%;}
100% {left:100%; width:0;}
}
I added the height transition on hover (which is probably what would occur on an event listener instead starting at height: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; }
}