I have 3 vector images created in Adobe Illustrator.
I want animate this vector quality images same way as gif does, fast endless loop sequence of 3 images in .svg format in browser mypage.php <img src="assets/img/logo.svg" alt="" alt="" width="65" height="45"/>.
What would be most correct way to get such animation for .svg, do I have to use all given methods to create vector animation, or in my scenario case I can do it some different way
There are a few ways you can do it. Given the information you have provided, here is one way.
We stack the frames on top of one another. Then make them visible one at a time.
.sequence {
position: relative;
}
.sequence img {
position: absolute;
top: 0;
opacity: 0; /* start all frames invisible */
animation: cycle 3s steps(1) infinite;
}
/* three images, so each gets made visible for 1/3 of the time */
#keyframes cycle {
0% { opacity: 1; }
33% { opacity: 0; }
}
/* start (ie. show) the second frame 1 sec after the first */
.sequence img:nth-child(2) {
animation-delay: 1s;
}
/* start (ie. show) the third frame 2 sec after the first */
.sequence img:nth-child(3) {
animation-delay: 2s;
}
<div class="sequence">
<img src="https://placeimg.com/300/200/animals"/>
<img src="https://placeimg.com/300/200/nature"/>
<img src="https://placeimg.com/300/200/people"/>
</div>
These images happen to be JPEGs, but it doesn't matter what type they are. Your SVGs should work.
Given you have SVGs, you might find it better to combine them in a single SVG. Put the contents for each frame in it's own group (<g> element). Then use a similar approach as above, but instead show the groups one at a time.
For what you want, the fact that it are svg images is not relevant.
You can create an element and animate trough the different files as background.
div{
width: 102px;
height: 102px;
border: 1px solid black;
animation: rotateImages 1s infinite;
}
#keyframes rotateImages {
0% { background: url("https://www.placecage.com/g/100/100"); }
32% { background: url("https://www.placecage.com/g/100/100"); }
33% { background: url("https://www.placecage.com/100/100"); }
65% { background: url("https://www.placecage.com/100/100"); }
66% { background: url("https://www.placecage.com/c/100/100"); }
100% { background: url("https://www.placecage.com/c/100/100"); }
}
<div></div>
Related
I have been trying to get this to work for a while.
The point is that the inner div will have some shape and there will probably more than one (That's why I used the nth-child selector).
This inner div is supposed to be shown and then be hidden again both for some set amount of time.
the problem is, that I would like to animate all the (later) multiple inner divs in one animation. For this I thought I could use CSS variables, but this does not seem to work.
What I am trying to archieve in this example is the inner div basically just blinking by using the variable. But my result in Firefox is just a black box.
Am I missing anything? I already looked up if one could even use CSS variables in #keyframes and sure enough you can.
The only problem with them in animations seems to be that they are not interpolated in between but that they suddenly switch which is not a problem in this case.
#keyframes test{
from{
--one: 0;
}
to{
--one: 1;
}
}
#test{
width: 100px;
height: 200px;
background-color: black;
animation: test 1s infinite;
}
#test :nth-child(1){
width: 20px;
height: 20px;
margin: auto;
background-color: white;
opacity: var(--one,0);
}
<div id="test">
<div></div>
</div>
This can be achieved by defining variables using (as of writing this, not well-supported) #property, which allows declaring types and that allows the browser to "understand", for example, that a certain property (variable) is a Number and then it can gradually animate/transition that variable.
Example Code:
#property --opacity {
syntax: '<number>'; /* <- defined as type number for the transition to work */
initial-value: 0;
inherits: false;
}
#keyframes fadeIn {
50% {--opacity: 1}
}
html {
animation: 2s fadeIn infinite;
background: rgba(0 0 0 / var(--opacity));
}
The current types that are allowed include:
length, number, percentage, length-percentage, color, image, url, integer, angle, time, resolution, transform-list, transform-function, custom-ident (an identifier string)
Helpful articles:
https://web.dev/at-property/#writing-houdini-custom-properties
https://css-tricks.com/using-property-for-css-custom-properties
Cool Houdini demos
As stated in the specification:
Animatable: no
and also
Notably, they can even be transitioned or animated, but since the UA
has no way to interpret their contents, they always use the "flips at
50%" behavior that is used for any other pair of values that can’t be
intelligently interpolated. However, any custom property used in a
#keyframes rule becomes animation-tainted, which affects how it is
treated when referred to via the var() function in an animation
property.
So even if you use opacity with var() in the keyframes it won't animate:
#keyframes test {
from {
--one:0;
opacity: var(--one);
}
to {
opacity: var(--one);
--one: 1;
}
}
#test {
width: 100px;
height: 200px;
background-color: black;
}
#test :nth-child(1) {
width: 20px;
height: 20px;
margin: auto;
background-color: white;
animation: test 1s infinite;
}
<div id="test">
<div></div>
</div>
By the way you can make it working if you use it as a transition because in this case you will apply a transtion to the opacity and not the custom property:
#test {
width: 100px;
height: 200px;
background-color: black;
}
#test:hover {
--one:1;
}
#test :nth-child(1) {
width: 20px;
height: 20px;
margin: auto;
background-color: white;
opacity: var(--one,0);
transition:1s all;
}
<div id="test">
<div></div>
</div>
I'm using the jm spinner plugin on my site, but I want to change the bouncing dots from changing size (bouncing) when they show. They display as a 'bounce' that makes them look like they are growing in size. I just want them to stay the same size, but I've been playing with the .css file and the debugger and I can't figure out to make any changes!
Here is a code pen
On the site it says I can modify/style the spinner like
.spinner {
}
but I'm not sure what to put here.
It seems like I don't want the 'sk-bouncedelay' but not sure
Something like this? If so, you can forget about the plugin.
.spinner>div {
width: 13px;
height: 13px;
background-color: blue;
border-radius: 50%;
display: inline-block;
opacity: 0;
animation: showhide 1.4s infinite;
}
.spinner .dot1 {
animation-delay: -0.32s;
}
.spinner .dot2 {
animation-delay: -0.16s;
}
#keyframes showhide {
0%,
100% {
opacity: 0;
}
80% {
opacity: 1;
}
}
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
</div>
I have been trying to get this to work for a while.
The point is that the inner div will have some shape and there will probably more than one (That's why I used the nth-child selector).
This inner div is supposed to be shown and then be hidden again both for some set amount of time.
the problem is, that I would like to animate all the (later) multiple inner divs in one animation. For this I thought I could use CSS variables, but this does not seem to work.
What I am trying to archieve in this example is the inner div basically just blinking by using the variable. But my result in Firefox is just a black box.
Am I missing anything? I already looked up if one could even use CSS variables in #keyframes and sure enough you can.
The only problem with them in animations seems to be that they are not interpolated in between but that they suddenly switch which is not a problem in this case.
#keyframes test{
from{
--one: 0;
}
to{
--one: 1;
}
}
#test{
width: 100px;
height: 200px;
background-color: black;
animation: test 1s infinite;
}
#test :nth-child(1){
width: 20px;
height: 20px;
margin: auto;
background-color: white;
opacity: var(--one,0);
}
<div id="test">
<div></div>
</div>
This can be achieved by defining variables using (as of writing this, not well-supported) #property, which allows declaring types and that allows the browser to "understand", for example, that a certain property (variable) is a Number and then it can gradually animate/transition that variable.
Example Code:
#property --opacity {
syntax: '<number>'; /* <- defined as type number for the transition to work */
initial-value: 0;
inherits: false;
}
#keyframes fadeIn {
50% {--opacity: 1}
}
html {
animation: 2s fadeIn infinite;
background: rgba(0 0 0 / var(--opacity));
}
The current types that are allowed include:
length, number, percentage, length-percentage, color, image, url, integer, angle, time, resolution, transform-list, transform-function, custom-ident (an identifier string)
Helpful articles:
https://web.dev/at-property/#writing-houdini-custom-properties
https://css-tricks.com/using-property-for-css-custom-properties
Cool Houdini demos
As stated in the specification:
Animatable: no
and also
Notably, they can even be transitioned or animated, but since the UA
has no way to interpret their contents, they always use the "flips at
50%" behavior that is used for any other pair of values that can’t be
intelligently interpolated. However, any custom property used in a
#keyframes rule becomes animation-tainted, which affects how it is
treated when referred to via the var() function in an animation
property.
So even if you use opacity with var() in the keyframes it won't animate:
#keyframes test {
from {
--one:0;
opacity: var(--one);
}
to {
opacity: var(--one);
--one: 1;
}
}
#test {
width: 100px;
height: 200px;
background-color: black;
}
#test :nth-child(1) {
width: 20px;
height: 20px;
margin: auto;
background-color: white;
animation: test 1s infinite;
}
<div id="test">
<div></div>
</div>
By the way you can make it working if you use it as a transition because in this case you will apply a transtion to the opacity and not the custom property:
#test {
width: 100px;
height: 200px;
background-color: black;
}
#test:hover {
--one:1;
}
#test :nth-child(1) {
width: 20px;
height: 20px;
margin: auto;
background-color: white;
opacity: var(--one,0);
transition:1s all;
}
<div id="test">
<div></div>
</div>
I'm making a diaporama in pure css, and so far so good, however each pic changes to the other abruptly and i'm trying to make the change gradual (one pic disapearing slowly while the other appears).
I've tried with all timing functions (except cubic-bezier since i'm not too sure how to use it yet) and it hasn't worked.
How to make the changes gradual? I've seen someone doing it with only css3 but I haven't been able to reproduce it.
Here is the css and the html
.diapo {
width: 350px;
height: 150px;
border: 3px solid #544B4D;
background-image: url("http://via.placeholder.com/350x150/F00");
background-size: 350px 150px;
animation-name: diapo1;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
#keyframes diapo1 {
0% {
background-image: url("http://via.placeholder.com/350x150/F00");
}
33% {
background-image: url("http://via.placeholder.com/350x150/0F0");
}
66% {
background-image: url("http://via.placeholder.com/350x150/00F");
}
}
<body>
<div class="diapo">
</div>
</body>
Thanks for any answer!
IMO, the best solution is to use multiple img in the DOM combined with some opacity animations:
.container {
position: relative;
/* Define size on the container: (best if aligned with images size) */
width: 350px;
height: 150px;
box-sizing: content-box;
/* fancy stuff, not required */
border: 1px solid #000;
border-radius: 5px;
overflow: hidden;
}
.container > img {
height: inherit;
width: inherit;
/* images are stacked on top of each other */
position: absolute;
top: 0;
left: 0;
opacity: 0;
/* 10s is total time (time for a complete cycle) */
animation: fadeInOut 10s infinite;
}
.container > img:nth-child(2) {
animation-delay: 3.33s; /* totalTime * 1/3 */
}
.container > img:nth-child(3) {
animation-delay: 6.66s; /* totalTime * 2/3 */
}
/* choose a % of anim time allocated to transition,
let's call it transTime. Here it's 10%. */
#keyframes fadeInOut {
0% {
opacity: 0;
}
/* transTime */
10% {
opacity: 1;
}
/* transTime + (100% / image count) */
43% {
opacity: 1;
}
/* previous + transTime */
53% {
opacity: 0;
}
}
<div class="container">
<img src="http://via.placeholder.com/350x150/F00"/>
<img src="http://via.placeholder.com/350x150/0F0"/>
<img src="http://via.placeholder.com/350x150/00F"/>
</div>
I strongly advise you to use a preprocessor that allow variables and loops (maybe SCSS or Less) to generate the nth-child section and even the animation block
I don't know that most browser can interprete a change in background-image gradually... How can they interprete that change ? Should it mean the picture slides from the top, should it mean a fade out/fade in, should it mean a fade in of the new picture above the old one ?
I think you'd need to animate a fade out/in (The code below might not work as is, it is just to give you an idea) :
#keyframes diapo1 {
0% {
background-image: url("pics-about-us/a-u1.jpeg");
}
30% { opacity:1;}
33% {
background-image: url("pics-about-us/a-u3.jpeg");
opacity:0;
}
36% {opacity:1}
//etc...
If you want to do it with a gradual change over the whole animation, I would use on <div> child per background image and animate each individually.
Hello I wondering if there is a transition to make the purple div (the one that slides down when you hover over the feeling down? picture) bounce when it reaches the end?
here is the code- and jsFiddlle Demo link
HTML
<div class="img">
<div class="hover"><h2>project 1</h2></div>
</div>
CSS
.img {
width: 457px;
height: 288px;
background-image: url("http://i59.tinypic.com/xdulh2.png");
position:relative;
overflow:hidden;
}
h2 {
font-family: avenir;
font-weight: bold;
font-size: 40px;
color: #000;
}
.hover {
position:absolute;
top:-100%;
width: 457px;
height: 288px;
background: rgba(130,76,158,0.5);
-webkit-transition:all 1s;
}
.img:hover .hover {
top:0;
}
an example of the transition i mean you can see here http://www.ollygibbs.com
CSS Transition doesn't have bounce-style timing function, so we have to code it with CSS animation keyframes. The problem here is - how to easily decompose a bouncing ( or any other ) functions into a keyframe series over certain style?
This was the problem I encountered when I build transition.css, so I built a tool "easing.css" to help me generate keyframes from arbitrary equations.
The idea is simple; say we want to make a bounce effect:
we first make a timing function f(t) for our desired effect, such as
Math.abs(Math.sin(1.2 + (t ** 1.4) * 23)) * ( 1 - t ) ** 2.8
according to how the output of this function changes, we sampled this function with different interval from 0 to 1.
use the sampled (t, f(t)) pairs to generate the css animation keyframes.
apply the result animation when we need a transition.
with the concept above, easing.css also provides several timing function preset so you can play with. Below is a 15-frames bouncing animations generated via easing.css, you could make it more like a real bounce by increasing the frame count or tweaking the timing function provided:
.your-block {
animation: YourAnimation 2s linear 1s;
}
#keyframes YourAnimation {
0% { height: 7px; }
8% { height: 24px; }
10% { height: 36px; }
17% { height: 99px; }
19% { height: 83px; }
21% { height: 69px; }
24% { height: 57px; }
25% { height: 56px; }
27% { height: 59px; }
34% { height: 100px; }
36% { height: 88px; }
38% { height: 80px; }
48% { height: 100px; }
72% { height: 100px; }
100% { height: 100px; }
}
The animate.css library will give you a more complete setup and you can choose and pick the ones you need, but if you must code your own, use this code I included in a CODEPEN
Basically, you instantiate the bounce effect with the following crossbrowser code. This code establishes the bounce, speed of bounce, and the direction it will bounce. You can choose ease-out if you want to.
Now, Bouncing is a tricky thing. Because it must go up and down until it stops. so the bounces must gradually decrease the height. So, this is why you need #-keyframes, (notice you will need #-webkit-keyframes and #-moz-keyframes, etc for a more complete cross browser development. These keyframes allow you to break the effect at any point. In a bouncing effect in particular, the effect breaks every 10% by reducing it's position in the Y axis (which it means height), until it finally stops.
-webkit-animation: bounce 1200ms ease-in;
-moz-animation: bounce 1200ms ease-in;
-o-animation: bounce 1200ms ease-in;
animation: bounce 1200ms ease-in;
Hope that helps you.
p.s. my code looks a little buggy but you'll have a good enough start. I added your code in your fiddle to it too
Hey as previous suggested animate.css is pretty good with css animations, but to have more control over the animation you can add it with js. You just have to add an small script.
$('.img').hover(function(){
$('.hover').addClass('animated bounceInDown');
}, function() {
$('.hover').removeClass('bounceInDown');
$('.hover').addClass('bounceOutUp');
setTimeout(function() {
$('.hover').removeClass('animated bounceOutUp');
}, 1000);
});
Check out this fiddle example
After that, you just need to play with the values on the .bounceInDown .bounceOutUp keyframes annimation (if you want to).
So that the animation is more or less bouncy
#keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -60px, 0);
transform: translate3d(0, -60px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -800px, 0);
transform: translate3d(0, -800px, 0);
}
}
Another way (with jquery) of doing this will be using jQuery .animate and easing plugin.
<div id="example">
<p class="bounce"></p>
</div>
div {
width: 200px;
height: 200px;
background: red;
}
.bounce {
width: 100%;
height: 0px;
background: rgba(134,12,12,.4);
}
$('#example').on('mouseenter',function(){
$('p').animate(
{ height: "200px" },
1000,
"easeOutBounce"
);
})
[js fiddle example][1] [1]: http://jsfiddle.net/2ra7yumo/2/
It gives you little bit more(or easier) control on the animation.