CSS Change Text Color Randomly - css

I know how to make that with JS but in http://daneden.github.io/animate.css/ Animate.css text changes so smoothly and there's no JS on it!
Can someone explain me?
Thanks


h1 {
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
#-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(360deg);
}
}
for a markup like this
<h1>CHANGE COLOR TEXT</h1>
You can see an example here : http://jsfiddle.net/3oqep26z/
Modify the animation time for faster color changes


My guess is that it would be with CSS3
I found this online
http://imajineweb.com/csstexthover


This is css3 features. Will work not everywhere
Set animation in some style:
-webkit-animation-duration: 10s;
Name it
-webkit-animation-name: colours;
And use in the way you need
#-webkit-keyframes colours {
0% {background-color: #39f;}
15% {background-color: #8bc5d1;}
30% {background-color: #f8cb4a;}
45% {background-color: #95b850;}
60% {background-color: #944893;}
75% {background-color: #c71f00;}
90% {background-color: #bdb280;}
100% {background-color: #39f;}
}
Example:
http://jsfiddle.net/gk37un0r/

Related

Animations only affect first element of css-doodle

I want to make random "blinking" effect when hovering over a doodle. For this i store animation name blink into a variable when user hovers over doodle container. For some reason animation applies only to the first element of the grid. Is there a way to apply the animation to all elements?
CodePen: https://codepen.io/entityinarray/pen/mdbRPRz
<html>
<script src="https://unpkg.com/css-doodle#0.7.2/css-doodle.min.js"></script>
<css-doodle>
:doodle {
#grid: 4/128px;
--h: ;
}
:doodle(:hover) {--h: blink;}
background: #200040;
animation-delay: rand(500ms);
animation: #var(--h) 1s infinite;
#keyframes blink {
0% {
background: #200040;
}
100% {
background: #8000c0;
}
}
</css-doodle>
</html>

The issue is that the use of #var(--h) is generating code like var(--h)-x which is invalid and only the first item is having the good value var(--h).
Instead of doing this you can simply consider the animation state like below. Note that rand() should be used with # and placed after the animation definition:
<html>
<script src="https://unpkg.com/css-doodle#0.7.2/css-doodle.min.js"></script>
<css-doodle>
:doodle {
#grid: 4/128px;
}
:doodle(:hover) {--h:running;}
background: #200040;
animation: blink 1s infinite;
animation-play-state:var(--h,paused);
animation-delay: #rand(500ms);
#keyframes blink {
0% {
background: #200040;
}
100% {
background: #8000c0;
}
}
</css-doodle>
</html>

Is there a way to granulary control the animation properties on a CSS element?

I have this code:
transition: all 0.35s;
transition-delay: 0.25s;
transition-timing-function: cubic-bezier(.79,0,.46,1);
But it turned out to be problematic if I add more properties that I wanna animate, so I'm looking to do something like:
transition: transform 0.35s/*duration*/ 0.25s /*delay*/ cubic-bezier(.79,0,.46,1),
opacity 0.25s/*duration*/ 1s /*delay*/ ease-in ;
I looked at the short-hand properties but can't quite find the right combo.

Yes, what you want is a css animation not a css transition. Transitions are for creating a smooth transition from one state to another while animations allow you to define more complex behavior by changing css properties.
It would look something like this:
element {
animation-name: yourAnimationName;
animation-timing-function: cubic-bezier(.79,0,.46,1);
animation-delay: 0.25s;
}
#keyframes yourAnimationName {
// here you define which css properties to animate
}
You can either define the keyframes using from and to:
#keyframes yourAnimationName {
from { background-color: red; }
to { background-color: yellow; }
}
or you can define multiple keyframes using percentages (at what percentage of the entire animation):
#keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
You also probably wont need your cubic-bezier timing function if you use keyframes as percentages.
I recommend reading a bit about css animations HERE.

#keyframes animation not working in firefox 55.03

I can't get this working with Firefox. I animated a menu item anchor that changes background-color, color and border. The animation works fine in MS IE, Chrome, Opera, but not Firefox.
This is my css #keyframes:
#-webkit-keyframes button-flash {
0% {background-color:rgba(255,85,51,0.9);color:#fff;}
40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}
#keyframes button-flash {
0% {background-color:rgba(255,85,51,0.9);color:#fff;}
40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}
This is my css element:
ul#main-menu > li#menu-item-22 > a,
ul#main-menu > li#menu-item-196 > a{
color:#fff !important;
background-color:rgba(255,85,51,0.9) !important;
border:1px dotted transparent !important;
-webkit-animation-name:button-flash;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count:infinite;
animation-name:button-flash;
animation-duration:1.5s;
animation-iteration-count:infinite;
}
Thank you. Lenny
Updated 9/22/17, 0913...
Here is NEW information I'd like to add to my problem description to clarify further...
This is a WordPress site with a child theme. My child theme's stylesheet includes both the #keyframes code and the css code for the elements on the page. In other words, I do not have a separate stylesheet for the animation code.
The #keyframes section in my child stylesheet is located immediately above the css code describing the anchor element's animation.
Following lanosmind's answer/reccomendation below, I inserted the #-moz-keyframes button-flash section above the #keyframes button-flash section so the animation would work on FireFox. Unfortunately, adding the #moz-keyframes-button-flash section did not help.
So now, my revised #keyframes code and css code for this anchor element looks like this:
#-webkit-keyframes button-flash {
0% {background-color:rgba(255,85,51,0.9);color:#fff;}
40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}
#-moz-keyframes button-flash {
0% {background-color:rgba(255,85,51,0.9);color:#fff;}
40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}
#keyframes button-flash {
0% {background-color:rgba(255,85,51,0.9);color:#fff;}
40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}
ul#main-menu > li#menu-item-22 > a,
ul#main-menu > li#menu-item-196 > a{
color:#fff !important;
background-color:rgba(255,85,51,0.9) !important;
border:1px dotted transparent;
-webkit-animation-name:button-flash;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:button-flash;
-moz-animation-duration:1.5s;
-moz-animation-iteration-count:infinite;
animation-name:button-flash;
animation-duration:1.5s;
animation-iteration-count:infinite;
}
Can anyone suggest other things I can try to animate this anchor in Firefox?
Thank you very much.

you need to use #-moz-keyframes as well for cross browser support

I solved this problem which presented only in Firefox by:
(1) deleting the "default" element's background-color and color styles which allowed the same codes in the #-moz-keyframes section to be foremost, and
(2) moving the entire code section for this element down lower in the stylesheet.
Lenny

How to persist css3 animation change

Goal is to keep the background red at the end of the animation.
Using chrome
http://codepen.io/JulianNorton/pen/RNqLZM
.animation {
-webkit-animation:test-animation 2s 2;
// Animation stops after a few seconds, state doesn't stay red.
}
#-webkit-keyframes test-animation {
0% {
background-color:#fff
}
100% {
background-color:red
}
}
#keyframes test-animation {
0% {
background-color:#fff
}
100% {
background-color:red
}
}

animation-fill-mode: forwards;
is most likely what you were looking for.
Source:
CSS Animation property stays after animating

Just set the background color of your .animation element to red. Since the keyframe animation is triggered automatically, it will not appear red at first, but white like you want.

-webkit-transform how can I change rotate() while preserving translate3d()?

What I am looking to do is change the translate3d transform of an element while a css3 animation is running on the element. When I try to do this, however, it seems that the animation resets the transform every time right before updating the animation such that the translation is always (0,0,0). I wish to have the animation running and still be able to translate it with javascript such as:
element.style.webkitTransform='translate3d(100px, 30px, 0px)';
I know it would be possible by using a second containing div to set the translation on while the inner div runs the animation, but I would like to be able to just use one div if possible. Do you know how to achieve this?
This is my css as it stands:
.class{
width:32px;
height:32px;
position:absolute;
background: transparent url('./img/sprite.png');
background-size:100%;
-webkit-transform: translate3d(48px, 176px, 0px);
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 100ms;
-webkit-animation:spin .75s infinite linear;
}
#-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}

You can concatenate several transformation functions with a space:
-webkit-transform: translate3d(48px, 176px, 0px) rotateY(30deg) rotateX(10deg);

Resources