I have a simple question (I think).
Is there any way to chain CSS3 animations like:
#element { animation: fadeIn 5s 0s linear, fadeOut 5s 25s linear ; }
#keyframes fadeOut {
from { opacity:1; }
to { opacity:0; }
}
#keyframes fadeIn {
from { opacity:0; }
to { opacity:1; }
}
In this case, I think I could fadingIn and fadingOut different elements with different delays.
Thanks a lot,
Lionel
Yes, you can use 0%, 25%, etc. increments and chain the whole animation.
Take a look at this fiddle.
What I have done is using incremenets to make the animation one big chain.
#-webkit-keyframes move {
0% {top: 100px;
left: 100px;
-webkit-transform: rotate(135deg);}
25% {top: 250px;
left: 250px;
-webkit-transform: rotate(135deg);}
50% {top: 100px;
left: 250px;
-webkit-transform: rotate(0deg);}
75% {top: 250px;
left: 100px;
-webkit-transform: rotate(-135deg);}
100% {top: 100px;
left: 100px;
-webkit-transform: rotate(0deg);}
}
The % timings are stops where the animation should change, so to change when your object fades in and out, just change those percentages accordingly.
Related
I wanna make a drop animation when the page loads similar to a working example I've seen at someone else but mine doesn't. The image doesn't drop at all, does not transition from 0 opacity to 1 opacity. It just suddenly appears after the given duration. Help me, please.
.cover img{
height: 60vh;
filter: drop-shadow(1px 5px 3px black);
position: relative;
left: 60px;
animation: drop 1.5s ease;
}
#keyframes drop{
0% {
opacity: 0%;
transform: translateY(-80px);
}
100% {
opacity: 1%;
transform: translateY(0px);
}
}
What I think you've done wrong is used a percentage in the opacity. You just need the number.
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
Does this help?
I have an svg with two different animations; a briefcase hopping up and some speed lines. What I want to happen is when it is hovered over, the animations play. The problem is you have to hover over the solid parts rather than the whole thing. I don't want the outer ring moving, so I can't apply the animations to the whole thing.
For the SVGs that have only one animation for, I've used an circle with an opacity of zero to make them work. This does not work with multiple animations.
/* Animation Code */
.case:hover {
animation: jump 1.5s linear infinite;
position:relative;
top:0;
bottom:0;
left:0;
right:0;
margin:0 auto;
transform-origin: 50% 50%;
}
#keyframes jump{
0% {transform: translate(0,0) ;}
30% {transform: translate(0,-10%) ;}
100% {transform: translate(0,0) ;}
}
.lines:hover {
animation: woosh 1.5s linear infinite;
position:relative;
top:0;
bottom:0;
left:0;
right:0;
margin:0 auto;
transform-origin: 50% 75%;
}
#keyframes woosh{
0%, 5% {
transform: scaleY(0);
}
30% {
transform: scaleY(-1);
opacity: 0.3;
}
55% {
opacity: 0;
}
100% {
transform: scaleY(-1);
opacity: 0;
}
}
https://jsfiddle.net/paulmadsenbe/tj7q5sgp/
If you put both of your animated objects in a parent container and then used container:hover .case and container:hover .lines you can trigger them together. Here's a modification of your fiddle: https://jsfiddle.net/3kewaL9r/
I have two transform operations (rotate and translate) and I want to make transition for translate only (rotate have to be instant).
Some suggestions? I prefer pure css.
Use keyframes to reach your desired effect, in addition to animation-fill-mode to keep the computed styles when the animation is finished.
.object {
width: 50px;
height: 50px;
background-color: #F00;
animation-fill-mode: forwards;
}
.object:hover {
animation: move 1s;
animation-fill-mode: forwards;
}
#keyframes move {
0% {
transform: translateY(0px) rotate(0deg);
}
1% {
transform: rotate(45deg);
}
100% {
transform: translateY(25px) rotate(45deg);
}
}
<div class="object"></div>
I'd like to spin an image and I came across this video https://www.youtube.com/watch?v=nD8xqlh6Esk which gave a very simple way to spin a div on a click. I thought this would be a great method to spin an image on a page load with minimal css so tried using a :after as opposed to a :click (with 720 deg) but that didn't work. Has anyone got this approach to work on a page load rather than on a click? I've seen other methods but they need quite a bit more css.
Detail provided
[Apparently my youtube link is to a football match although for me it's to a LevelUp Tuts CSS Experiments #1 - Card Flipping Effect video.]
Basically, he flips a card through a simple transform on a hover as follows:
<div class="card"></div>
.card {
background: blue;
width: 200px;
height: 200px;
}
.card:hover {
transform: rotateY (90deg);
}
So you can spin the div with a single line, a transform, on a hover. There's no need for keyframes.
Try this:
div {
width: 100px;
height: 100px;
background: red;
animation: spin 2s infinite;
-webkit-animation: spin 2s infinite;
}
#keyframes spin{
to{
transform: rotate(360deg);
}
}
#-webkit-keyframes spin{
to{
transform: rotate(360deg);
}
<div id="d"></div>
EDIT: is this more like what you wanted?
div {
width: 100px;
height: 100px;
background: red;
animation: spin 2s forwards;
-webkit-animation: spin 2s forwards;
}
#keyframes spin{
to{
transform: rotateY(90deg);
}
}
#-webkit-keyframes spin{
to{
transform: rotateY(90deg);
}
}
<div id="d"><img src="http://img4.wikia.nocookie.net/__cb20120208185721/logopedia/images/5/54/Barclays_Premier_League_logo_(shield).gif" width="100px" height="100px"></div>
You need animation as well, not just transition:
http://jsfiddle.net/rudiedirkx/AB277/95/
The magic:
.card {
animation: spinn 5s linear infinite;
/* you don't need transition at all */
}
#keyframes spinn {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(720deg); }
}
For some reason, Chrome still needs prefixes.
More info on css-tricks.
this animates the object as soon as the css and the html load:
(http://jsfiddle.net/oemtt7cr/)
#-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(720deg);
}
}
#keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(720deg);
}
}
.container {
-webkit-perspective: 2000px;
}
.card {
margin: 20px;
background: #990;
width: 200px;
height: 200px;
animation: spin 5s ease;
-webkit-animation: spin 5s ease;
}
<div class="container">
<div class="card">flipy</div>
</div>
Use .card:hover instead of .card:after if you like the animation start when user move in with cursor.
http://jsfiddle.net/AB277/90/
.card {margin 20px;
background: blue;
width: 200px;
height:200px;
transition: all 5s;
}
.card:hover {
transform: rotateY(720deg);
}
Or if you like the animation at page load, use the following script.
http://jsfiddle.net/AB277/93/
<div id="card"
</div>
var elm = document.getElementById('card');
elm.classList.add('cardMove');
#card {margin 20px;
background: blue;
width: 200px;
height:200px;
transition: all 5s;
}
.cardMove {
transform: rotateY(720deg);
}
I've been searching the answer for awhile but all I can see is translating an object in circular path. Is there a way to translate an element on an ellipse path given the semiminor and semimajor axis? Thanks alot!
the jfiddle of belows answer
css3
Have a look at this page, it explains mostly all you should know about translations with CSS3. Just as reminder: it is also possible to set keyframes you could use to definie your edge points of a spline you want to animate.
keyframes are explained here.
in your case it is a animation of two nested elements.
#1 for the picture or element you want to animate, where you define a X tranlate with ease
#2 and one as outer box for that #1 you animate the Y translate with.
if you arrange them clever in the same timescale but different ease in or out you can make your ellipse happen.
<style>
.viewport {
position:relative;
width:640px;
height:480px;
border:1px dashed #000;
}
.moveX {
position:absolute;
background:#f00;
height:2px;
width:480px;
top:240px;
left:0px;
-webkit-animation: mX 5s ease-in-out 0s infinite;
animation: mX 5s ease-in-out 0s infinite;
}
.moveY {
position:absolute;
width:480px;
height:100px; top:-50px;
border:1px solid #333;
-webkit-animation: mO 5s linear 0s infinite;
animation: mO 5s linear 0s infinite;
}
.elipsoid {
position:absolute;
background:url('http://placehold.it/100/00f/fff/&text=>°))><');
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border-radius:50%;
}
#keyframes mO {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes mO {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes mX {
0% { transform: translateX(0px); }
50% { transform: translateX(160px); }
100% { transform: translateX(0px); }
}
#-webkit-keyframes mX {
0% { -webkit-transform: translateX(0px) }
50% { -webkit-transform: translateX(160px); }
100% { -webkit-transform: translateX(0px) }
}
</style>
<div class="viewport">
<span class="moveX">
<div class="moveY"><span class="elipsoid"></span></div>
</span>
</div>