I have a row of four icons I want to animate from right to left but I want the animation to pause at some point so the each icon will be visible one after the other in a circled mask.
I just can't figure how to pause in a middle of a keyframe. I want to know if it's possible and if it's possible without any Javascript
Thanks a lot
here is what I have now:
#keyframes move {
0% {
opacity: 0;
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
}
25% {
opacity: 1;
}
50% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
75% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.icons {
-webkit-animation: move 4s ease-in 2;
-moz-animation: move 4s ease-in 2;
animation: move 4s ease-in 2;
}
100% {
-webkit-transform: translateX(-200%);
-moz-transform: translateX(-200%);
-ms-transform: translateX(-200%);
-o-transform: translateX(-200%);
transform: translateX(-200%);
}
}
thanks in advance for your help
If you could provide your HTML and clarify a little more it may be easier to understand exactly what it is you're trying to achieve.
But if you're looking to just stagger your icons you can use :nth-child pseudo selector to put a unique delay on the different icons, and then adjust your animation %'s to keep the icons positioned for your desired time.
.icons:nth-child(2) {
animation-delay: 1s;
}
.icons:nth-child(3) {
animation-delay: 2s;
}
.icons:last-child {
animation-delay: 3s;
}
Here is a working example of staggering your animation using nth-child.
Related
I am trying to auto rotate an image after ever 5 seconds from css. My code is working but only on hover but I want on both hover and without hover. So far I have done is given below.
.circle-border:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: transform 0.9s ease 0.3s;
}
<div class="circle-border">
<img class="img-circle" src="images/web.jpg" alt="service 1">
</div>
Thanks in advance
You need an animation not a transtion.
CSS Animations # MDN
This animation is 6s long but the rotation only takes place in the last 1/6th of the duration....which gives us a 1s animation every 5 seconds.
div {
width: 100px;
height: 100px;
background: #663399;
margin: 1em auto;
-webkit-animation-name: spinner;
animation-name: spinner;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes spinner {
83.33% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner {
83.33% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div></div>
I used Javascrit to do it however it's still can made with css alone
but maybe usefull, hope it can help
var circle = document.getElementById("test");
if (circle.classList.contains("move")) {
setInterval(function () {
"use strict";
circle.classList.add("move");
}, 2000);
setInterval(function () {
"use strict";
circle.classList.remove("move");
}, 5000);
}
.circle-border {
width:100px;
height:100px;
background-color:#F00;
}
.move {
animation: circle .9s ease 1;
}
.circle-border:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: transform 0.9s ease 0.3s;
}
#keyframes circle {
0% {transform:rotate(0)}
100% { transform:rotate(720deg)}
}
<div id="test" class="circle-border move">
</div>
I could really use some help. On this site http://medicalaid.org I've been trying to fix it after another developer left. The last problem I've got is I can't get half of the webkit animations to load in IE10, all other browsers work fine and virtually all content divs have them. I've tried rewriting the css for example:
#-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-moz-transform: scale(.3);
-o-transform: scale(.3);
-ms-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
-moz-transform: scale(.9);
-o-transform: scale(.9);
-ms-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
}
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn.go {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
-ms-animation-name: bounceIn;
animation-name: bounceIn;
}
And I can't get anything to work, would be great if someone could take a look and help me out
Try to remove the unprefixed versions of your css:
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
You need to define more than just the animation-name; you'll also need to provide duration. Without this information the browser doesn't know how long the animation is to last. Below I'm stating that the entire animation should last 2 seconds:
.bounceIn.go {
animation: bounceIn 2s;
}
The resulting animation is presumably along the lines of what you were desiring. I defined styles for .go that would make it green, and rounded.
I am trying to create a css transform for dropdown menu, but it does not work in firefox, this is the css code:
#-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
so is there special code for firefox transformation?
what is messing?
check this fiddle and see if it works for you.
http://jsfiddle.net/jybenjya/
it works fine for me. but the only thing you need to change is to add a time to the animation, either by adding "animation-duration:" or changing 'animation-name' to 'animation' and adding the time on the end as below
-webkit-animation: flipInX 3s;
animation: flipInX 3s;
just to be safe i usually include all the prefixes (moz for firefox)
-webkit-animation: flipInX 3s;
-moz-animation: flipInX 3s;
-o-animation: flipInX 3s;
animation: flipInX 3s;
-webkit-transform:
-moz-transform:
-ms-transform:
-o-transform:
transform:
etc.. but in my jsfiddle i didn't seem to need to include them.
Some configurations of Linux and older Windows machines (those without WebGL support) have trouble with 3D transforms and will treat them as if perspective was set as none.
Firefox on Windows incorrectly renders plugin content within no-op 3D transforms.
Is there a way to stop constant firing of animation during initial hover? I'm trying to execute a css animation on an icon during hover. When I move the mouse over the element the icon bounces erratically until I stop moving the mouse and sometimes hangs during the animation. I understand that the animation is firing on the initial hover until I stop but I'd like the effect to fully run once and stop unless I hover off.
HTML
<div class="box">
<img src="imagename.png" />
</div>
CSS
a {display: block;}
.animate {
-webkit-animation-duration: .9s;
animation-duration: .9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounce {
0%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
}
20% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
30% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#keyframes bounce {
0%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
20% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
30% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
.bounce:hover,
.bounce:focus {
-webkit-animation-name: bounce;
animation-name: bounce;
}
I've attached a jsfiddle of the result I'm getting.
http://jsfiddle.net/jordan911z/M3vZ2/
The animation-play-state property can pause or resume an animation. It accepts either:
running — the default; an animation plays as normal
paused — the animation is paused
#myelement:hover, #myelement:focus {
animation-play-state: paused;
}
See full tutorial on SitePoint.
Try add this to your CSS
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari and Chrome */
I know how to scale from 1 to 2:
transition: all 1s ease-in-out;
transform: rotate(360deg) scale(2);
But I need from 0.1 to 1. Is there any way to do it?
You have two options, using animation or transition, both will work as anticipated as long as you specify the starting values. animation is typically the preferred option when you want more control over the intermediate keyframes, or the immediate application of an animation.
HTML
<div></div>
Using animation
div {
background:red;
height:100px;
width:100px;
-webkit-transform: scale(0.1);
transform: scale(0.1);
-webkit-animation: transformer 4s ease-in 0s 1;
animation: transformer 4s ease-in 0s 1;
}
#-webkit-keyframes transformer {
from {
-webkit-transform: rotate(0deg) scale(0.1);
}
to {
-webkit-transform: rotate(360deg) scale(2);
}
}
#keyframes transformer {
from {
transform: rotate(0deg) scale(0.1);
}
to {
transform: rotate(360deg) scale(2);
}
}
Using transition
div {
width:100px;
height:100px;
background:red;
transition: all 1s ease-in;
-webkit-transform: rotate(0deg) scale(0.1);
transform: rotate(0deg) scale(0.1);
}
div:hover {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
You need to specify transform: scale(0.1); on the element (don't forget vendor prefixes) before you scale it to 1.
See the example below:
FIDDLE
CSS:
div{
width:500px;
height:500px;
background:gold;
transition: all 1s ease-in-out;
-ms-transform: rotate(0deg) scale(0.1);
-webkit-transform: rotate(0deg) scale(0.1);
transform: rotate(0deg) scale(0.1);
}
div:hover{
-ms-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}