Please see:
http://codepen.io/richardstelmach/pen/RNwvyG
"svg" is the id of the in the html.
The CSS is:
#svg{
display:block;
max-height:400px;
margin:0 auto;
animation:filters 2s infinite;
}
#svg .colour1{
fill:#2bb0b7;
}
#svg .colour2{
fill:#ab3e41;
}
/* animate effects */
#keyframes filters {
0%{
filter:hue-rotate(0deg);
}
100% {
filter:hue-rotate(360deg);
}
}
The animation isn't working. I've tried changing it to specific -webkit- CSS and also tried applying it to the class ".colour1" instead but to no avail.
I also tried animating the fill instead of using the hue-rotate. But again, no luck.
Just add vendor prefix and its beautiful:
#keyframes filters {
0%{
-webkit-filter:hue-rotate(0deg);
}
100% {
-webkit-filter:hue-rotate(360deg);
}
}
You need to prefix your filters too:
DEMO
#-webkit-keyframes filters {
0%{
-webkit-filter:hue-rotate(0deg);
}
100% {
-webkit-filter:hue-rotate(360deg);
}
}
Basically needed to browser prefix everything. :
#svg{
display:block;
max-height:400px;
margin:0 auto;
-webkit-animation:filters 20s infinite;
}
#svg .colour1{
fill:#2bb0b7;
}
#svg .colour2{
fill:#ab3e41;
}
/* animate effects */
#-webkit-keyframes filters{
0%{
-webkit-filter:hue-rotate(0deg);
}
100% {
-webkit-filter:hue-rotate(360deg);
}
}
Finished code here: http://codepen.io/richardstelmach/pen/RNwvyG
Will need to add in other pre-fixes for other browsers.
Related
I implemented a blinkingtext animation on my system to keep blinking red, but I want it only on the screen that I am putting the code and not at all.
Follow the code below.
/deep/ nb-layout-header nav {
animation:blinkingText 1s infinite;
}
#keyframes blinkingText {
0% {
background-color: #374355;
}
100%{
background-color: #D42333;
}
}
I found this code at http://freshinbox.com/blog/ambient-animations-in-email-snow-and-stars/ and liked the effect. Though when I put it into my email it creates a huge white space between the tables.
How do I insert this into an email correctly? Do I need to place the div tags in a certain place?
<style>
#media screen and (-webkit-min-device-pixel-ratio: 0) {
.animcontainer{
position:relative;
width:100%;
height:200px;
overflow:hidden;
background-color:#007FFF;
}
.snow{
border-radius:9px;
height:18px;
width:18px;
position:absolute;
top:-20px;
background-color:#ffffff;
}
.snow1{
-webkit-animation: snowanim1 5s linear 0s infinite;
}
.snow2{
-webkit-animation: snowanim2 6s linear 1s infinite;
}
.snow3{
-webkit-animation: snowanim3 7s linear 2s infinite;
}
#-webkit-keyframes snowanim1
{
0% { top:0%;left:50%; }
100% { top:100%;left:65%; }
}
#-webkit-keyframes snowanim2
{
0% { top:0%;left:30%; }
100% { top:100%;left:25%; }
}
#-webkit-keyframes snowanim3
{
0% { top:0%;left:70%; }
100% { top:100%;left:60%; }
}
}
</style>
.
<div class="animcontainer">
<div class="snow snow1"></div>
<div class="snow snow2"></div>
<div class="snow snow3"></div>
</div>
I figured it out in the end, it makes no difference where the div tags are. What was causing the issues was the animcontainer.
There is one issue I could not solve however and that was the animation not reaching the bottom of the page despite being "top:100%" within the animation, so I had to do 2000% to actually reach the bottom which does not look like an elegant solution.
I've followed a short tutorial to create a bouncing arrow however the code I've used it pretty much the same excluding small differences.
However, when I add it to my hero unit, it doesn't play my animation.
It could be the transform or keyframe mixins I used...
Here is the JSFiddle: http://jsfiddle.net/x9hxfusa/
Place the keyframes & mixins declarations at the top. You have to declare them before calling them.
See Demo
I tweaked and simplified your code, I think you can arrange the animation itself to be smoother, up to your liking. Remember to add cross browser support or at least use SCSS to manage it: jsFiddle
CSS
body { background-color: black; }
.arrow {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 40px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-webkit-animation: bounce 2s infinite;
}
#-webkit-keyframes bounce {
0% { bottom:5px; }
25%, 75% { bottom:15px; }
50% { bottom:20px; }
100% { bottom:0; }
}
I also think the key issue is with the mixins, however I stirred away from it to find a simpler solution for you.
Edit: I tried doing the following initially but I missed refreshing my jsFiddle and missed the obvious solution, which is now highlighted by #Oriol. Anyways, the issue is that your keyframe & mixin code is being positioned after the animation code (or at the top of your CSS for simplicity's sake). If you wish to keep your code as is just do that, or you can try my simplified solution.
You must declare
#mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
#mixin keyframes($animation-name) {
#-webkit-keyframes $animation-name {
#content;
}
#-moz-keyframes $animation-name {
#content;
}
#-ms-keyframes $animation-name {
#content;
}
#-o-keyframes $animation-name {
#content;
}
#keyframes $animation-name {
#content;
}
}
#mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
before include keyframes and transform. You must also set the bounce class in a different way (remove ''):
.bounce {
#include animation(bounce 2s infinite);
}
http://jsfiddle.net/uth333cg/
I have a div with an intro animation and on click I add a new class called 'exit' with a new animation, but the animation dont work.
div { animation: intro steps(14) 1s 1;
animation-fill-mode: forwards;
}
div.exit { animation: exit steps(18) 1s 1;
animation-fill-mode: forwards;
}
Any ideas?
It is working fine, you got it wrong in following code.
You forgot to add px after 500.
FIDDLE
#-webkit-keyframes exit {
0% {
left:500px;
}
100% {
left:0;
}
}
The animation is working, but you tell it to go to 0px.
If you say:
#keyframes exit {
0% { background:yellow; }
100% { background:black; }
}
It is working: http://jsfiddle.net/fsqp7vgk/1/
So, the animation is working, but you tell it again to go to position 0px. The solution is to specify in .exit {left:500px;} //your previous position.
Here it is with move animation: http://jsfiddle.net/fsqp7vgk/2/
.exit {animation:exit 5s 1; left:500px; }
#keyframes intro {
0% { left:100px; }
100% { left:500px; }
}
#keyframes exit {
0% { left:500px; }
100% { left:0px; }
}
Of course, keep -webkit- prefix if you use chrome.
I want to make a website that when you open it, the background fades into a different color.
Example:
/* Chrome, Safari, Opera */
#-webkit-keyframes {
from {
background: white;
}
to {
background: #F7F2E0;
}
}
/* Firefox */
#-moz-keyframes {
from {
background: white;
}
to {
background: #F7F2E0;
}
}
#keyframes {
from {
background: white;
}
to {
background: #F7F2E0;
}
}
But when I run the script, nothing happens.
You need to add a name to the animation and then add the animation properties to the desired element(s).
Example Here
#keyframes background {
from {
background:white;
}
to {
background:#000;
}
}
In the animation shorthand below, the value forwards is added for the animation-fill-mode property in order to end the animation at the last color.
body {
animation: background 4s forwards;
}
Vendor prefixes omitted for simplicity - see the example for the full CSS.
I'd suggest reading more about CSS animations at MDN.
You have to give a name to your keyframe and and then apply it to the body. See this example. For animations and browser support see here.
#keyframes fadeBackgroud{
from {
background:white;
} to {
background:#F7F2E0;
}
}
body {
animation:fadeBackgroud 5s infinite;
}