How do I make JavaScript functions change CSS? - javascript

On a lot of projects I have been making, I always had a problem that I wanted to make JavaScript change CSS styles. I tried reading other questions but it did not solve my answer. If a variable is above a certain number's value, like for example:
var points = 0;
if (points >= 50) {
(make an image appear or show)
}
how would I then make an image appear? I figured out it might work if the image display is set to none in CSS, but how would I change that?
var points = 0;
function add() {
points += 1;
score.innerHTML = points;
if (points == 10) {
score.innerHTML = "10";
LV.innerHTML = 2;
}
if (points >= 30) {
LV.innerHTML = 3;
};
};
function reset() {
points -= 1;
score.innerHTML = points;
if (points <= 0) {
points = 0;
score.innerHTML = points;
};
}
#font-face {
font-family: "Determination Sans";
src: url("https://dl.dropboxusercontent.com/u/2552046/fonts/DeterminationSansWeb.woff") format('woff');
}
p {
line-height: 1px;
}
body {
text-align: center;
background: #000000;
z-index: 5;
font-family: determination sans;
color: white;
font-size: 30px;
}
#bootain {
transform: scale(1);
animation: butt 3s infinite;
}
p {
transform: scale(0.5);
animation: textPulse 5s infinite;
}
.click {
width: 70px;
transform: scale(1);
animation: pulse 5s infinite;
box-shadow: red 5px 5px;
}
.score {
color: white;
animation: enchant 5s infinite;
}
.reset {
animation: deactivatepulse 7s infinite;
transform: scale(1);
}
button {
color: white;
animation: deactivatepulse 5s infinite;
}
#keyframes enchant {
0% {
color: white;
}
20% {
color: #c4abff;
}
40% {
color: #d9d6ff;
}
60% {
color: #fae8ff;
}
100% {
color: white;
}
}
#keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
opacity: 1;
transform: translatey(0px);
}
50% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
opacity: 0.7;
transform: translatey(20px);
}
100% {
transform: scale(0.8);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
opacity: 1;
transform: translatey(0);
}
}
#keyframes textPulse {
0% {
transform: scale(0.50);
opacity: 1;
}
50% {
transform: scale(0.55);
opacity: 0.9;
}
100% {
transform: scale(0.50);
opacity: 1;
}
}
#keyframes butt {
0% {
color: black;
box-shadow: 0 2 4 white;
}
20% {
color: #4d4d4d;
}
40% {
color: black;
}
60% {
color: #687d7b;
}
100% {
color: black;
}
}
#keyframes deactivatepulse {
0% {
color: black;
}
20% {
color: #a10000;
}
50% {
color: #ff4d00;
}
56% {
color: black;
}
70% {
color: #ff4d00;
}
90% {
color: #bfac3b;
}
100% {
color: black;
}
}
#keyframes buttonhover1 {
0% {
color: black;
}
20% {
color: #82fffd;
}
50%
}
<h8 class="soulintro">THIS IS YOUR SOUL.</h8>
<br>
<img src="https://i.ibb.co/QmRsxNK/Sowl.png" class="click" style="width: 100px"></img>
<br>
<p id="LV">LV: 1</p>
<p id="score">SOUL power (XP): 0</p>
<button id="bootain" onclick="add();" style="width: 80px; height: 30px; font-family: determination sans; font-size: 11px;">Increase power level</button>
<button id="reset" onclick="reset();" style="width: 80px; height: 30px; font-family: determination sans; font-size: 11px;">Decrease power level</button>
<h7 class="characters"></h7>


Call function when add and reset function call.
function showHideImage() {
if(points >= 50 ){
image.style.display = "block";
} else {
image.style.display = "none";
}
}
var points = 0;
const image = document.querySelector("img");
function showHideImage() {
if(points >= 50 ){
image.style.display = "block";
} else {
image.style.display = "none";
}
}
function add() {
points += 1;
score.innerHTML = points;
if (points == 10) {
score.innerHTML = "10";
LV.innerHTML = 2;
}
if (points >= 30) {
LV.innerHTML = 3;
};
showHideImage();
};
function reset() {
points -= 1;
score.innerHTML = points;
if (points <= 0) {
points = 0;
score.innerHTML = points;
};
showHideImage();
}
#font-face {
font-family: "Determination Sans";
src: url("https://dl.dropboxusercontent.com/u/2552046/fonts/DeterminationSansWeb.woff") format('woff');
}
.img-container{
display: flex;
justify-content: center;
align-items: center;
}
img{
display: none;
}
p {
line-height: 1px;
}
body {
text-align: center;
background: #000000;
z-index: 5;
font-family: determination sans;
color: white;
font-size: 30px;
}
#bootain {
transform: scale(1);
animation: butt 3s infinite;
}
p {
transform: scale(0.5);
animation: textPulse 5s infinite;
}
.click {
width: 70px;
transform: scale(1);
animation: pulse 5s infinite;
box-shadow: red 5px 5px;
}
.score {
color: white;
animation: enchant 5s infinite;
}
.reset {
animation: deactivatepulse 7s infinite;
transform: scale(1);
}
button {
color: white;
animation: deactivatepulse 5s infinite;
}
#keyframes enchant {
0% {
color: white;
}
20% {
color: #c4abff;
}
40% {
color: #d9d6ff;
}
60% {
color: #fae8ff;
}
100% {
color: white;
}
}
#keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
opacity: 1;
transform: translatey(0px);
}
50% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
opacity: 0.7;
transform: translatey(20px);
}
100% {
transform: scale(0.8);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
opacity: 1;
transform: translatey(0);
}
}
#keyframes textPulse {
0% {
transform: scale(0.50);
opacity: 1;
}
50% {
transform: scale(0.55);
opacity: 0.9;
}
100% {
transform: scale(0.50);
opacity: 1;
}
}
#keyframes butt {
0% {
color: black;
box-shadow: 0 2 4 white;
}
20% {
color: #4d4d4d;
}
40% {
color: black;
}
60% {
color: #687d7b;
}
100% {
color: black;
}
}
#keyframes deactivatepulse {
0% {
color: black;
}
20% {
color: #a10000;
}
50% {
color: #ff4d00;
}
56% {
color: black;
}
70% {
color: #ff4d00;
}
90% {
color: #bfac3b;
}
100% {
color: black;
}
}
#keyframes buttonhover1 {
0% {
color: black;
}
20% {
color: #82fffd;
}
50%
}
<h8 class="soulintro">THIS IS YOUR SOUL.</h8>
<br>
<div class="img-container">
<img src="https://i.ibb.co/QmRsxNK/Sowl.png" class="click" style="width: 100px"></img>
</div>
<br>
<p id="LV">LV: 1</p>
<p id="score">SOUL power (XP): 0</p>
<button id="bootain" onclick="add();" style="width: 80px; height: 30px; font-family: determination sans; font-size: 11px;">Increase power level</button>
<button id="reset" onclick="reset();" style="width: 80px; height: 30px; font-family: determination sans; font-size: 11px;">Decrease power level</button>
<h7 class="characters"></h7>


You could do this:
var points = 0;
const img = document.getElementById("image")
if (points >= 50) {
img.style.display = "block"
} else {
img.style.display = "none";
}
JavaScript changes the inline styles of HTML elements, by adding the style attribute to the element. But if you don't want to use inline styles, then you could write to the <style> tag.
First, create a style tag in the head tag and then write
var styleEl = document.querySelector("style");
var points = 0;
styleEl.innerHTML = `img { display: ${points >= 50 ? 'block' : 'none' };}`
Also see: W3Schools's tutorial for JavaScript DOM CSS


I think I got it now!
The simplest way is by changing CSS, which can be done through:
document.getElementById("img").style.display="inline-block";


Rather than using inline events and styles the markup should be kept as clean as possible by using both Javascript & CSS externally as much as possible. You can, ( easier with a minor tweak to the HTML ), use a single event listener to perform the increase/decrease of points necessary to display the image. The image will only display if the src attribute is present so by modifying that image to use a dataset attribute for the source, data-src you can programmatically toggle the src attribute quite easily. The code below uses incrementer variable to speed testing- presumably this will be 1 for final version but set here at 10
let points=0;
let incrementer=1;
const lv=document.getElementById('LV');
const sp=document.getElementById('score');
const img=document.querySelector('img.click[data-src]');
document.querySelectorAll('button[data-task]').forEach(btn=>{
btn.addEventListener('click',function(e){
switch( this.dataset.task ){
case 'increase':
points+=incrementer;
break;
case 'decrease':
points-=incrementer;
break;
}
let level=lv.textContent;
if( points >= 50 ){
if( !img.hasAttribute('src') )img.src=img.dataset.src;
}else{
if( img.hasAttribute('src') )img.removeAttribute('src');
}
if( points > 0 && points % 10==0 && points < 40 )level=points/10;
sp.textContent=points;
lv.textContent=level;
});
})
#font-face {
font-family: "Determination Sans";
src: url("https://dl.dropboxusercontent.com/u/2552046/fonts/DeterminationSansWeb.woff") format('woff');
}
p {
line-height: 1px;
}
body {
text-align: center;
background: #000000;
z-index: 5;
font-family: determination sans;
color: white;
font-size: 30px;
}
#bootain {
transform: scale(1);
animation: butt 3s infinite;
}
p {
transform: scale(0.5);
animation: textPulse 5s infinite;
}
.click {
width: 70px;
transform: scale(1);
animation: pulse 5s infinite;
box-shadow: red 5px 5px;
}
.score {
color: white;
animation: enchant 5s infinite;
}
.reset {
animation: deactivatepulse 7s infinite;
transform: scale(1);
}
button {
color: white;
animation: deactivatepulse 5s infinite;
}
#keyframes enchant {
0% {
color: white;
}
20% {
color: #c4abff;
}
40% {
color: #d9d6ff;
}
60% {
color: #fae8ff;
}
100% {
color: white;
}
}
#keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
opacity: 1;
transform: translatey(0px);
}
50% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
opacity: 0.7;
transform: translatey(20px);
}
100% {
transform: scale(0.8);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
opacity: 1;
transform: translatey(0);
}
}
#keyframes textPulse {
0% {
transform: scale(0.50);
opacity: 1;
}
50% {
transform: scale(0.55);
opacity: 0.9;
}
100% {
transform: scale(0.50);
opacity: 1;
}
}
#keyframes butt {
0% {
color: black;
box-shadow: 0 2 4 white;
}
20% {
color: #4d4d4d;
}
40% {
color: black;
}
60% {
color: #687d7b;
}
100% {
color: black;
}
}
#keyframes deactivatepulse {
0% {
color: black;
}
20% {
color: #a10000;
}
50% {
color: #ff4d00;
}
56% {
color: black;
}
70% {
color: #ff4d00;
}
90% {
color: #bfac3b;
}
100% {
color: black;
}
}
#keyframes buttonhover1 {
0% {
color: black;
}
20% {
color: #82fffd;
}
50%
}
button{width: 80px; height: 30px; font-family: determination sans; font-size: 11px;cursor:pointer}
[data-text]:before{content:attr(data-text)}
<h8 class="soulintro">THIS IS YOUR SOUL.</h8>
<img data-src='https://i.ibb.co/QmRsxNK/Sowl.png' class="click" alt='Heart animation' />
<p id='LV' data-text='LV:'>1</p>
<p id="score" data-text='SOUL power (XP):'>0</p>
<button id="bootain" data-task='increase'>Increase power level</button>
<button id="reset" data-task='decrease'>Decrease power level</button>
<h7 class="characters"></h7>


Upload the picture in the image file and put the right path for it in code
var points = 0;
if (points >= 50) {
var img = document.createElement("img");
img.src = "1.png";
var src = document.getElementById("x");
src.appendChild(img);
}

Related

How to test css color in javascript

I'm still a beginner in javascript and CSS,
I have a bookmark heart icon I want to show alert depending if the icon checked or unchecked.
$('button').on('click', function(){
$(this).toggleClass('faved');
if ($(this).hasClass('faved')) {
alert("red");
} else {
alert("empty");
}
});
#yellow: #FFAC33;
#gray: #CCC;
#red: #E86C6C;
button#favorite {
background: transparent;
border: 0;
span {
padding: 20px;
font-size: 70px;
font-weight: normal;
color: #gray;
position: relative;
span {
position: absolute !important;
top: 0;
left: 0;
font-size: 70px;
}
}
}
#keyframes favorite {
.favorite;
}
#-webkit-keyframes favorite {
.favorite;
}
#keyframes favoriteHollow {
.favoriteHollow;
}
#-webkit-keyframes favoriteHollow {
.favoriteHollow;
}
button#heart {
background: transparent;
border: 0;
span {
padding: 20px;
font-size: 70px;
font-weight: normal;
color: #gray;
position: relative;
span {
position: absolute !important;
top: 0;
left: 0;
font-size: 70px;
}
}
&.faved {
span {
-webkit-animation: heart 0.5s;
animation: heart 0.5s;
color: #red;
span {
z-index: 1000;
-webkit-animation: heartHollow 0.5s;
animation: heartHollow 0.5s;
}
}
}
}
.heart {
{
transform: scale(1);
}
{
transform: scale(1.2);
color: #red;
}
{
transform: scale(1.4);
color: #red;
}
{
transform: scale(1);
color: #red;
}
}
.heartHollow {
{
transform: scale(1);
opacity: 1;
}
{
transform: scale(1.4);
opacity: 0.5;
}
{
transform: scale(1.6);
opacity: 0.25;
}
{
transform: scale(2);
opacity: 0;
display: none;
}
}
#keyframes heart {
.heart;
}
#-webkit-keyframes heart {
.heart;
}
#keyframes heartHollow {
.heartHollow;
}
#-webkit-keyframes heartHollow {
.heartHollow;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<button id="heart">
<span class="glyphicon glyphicon-heart">
<span class="glyphicon glyphicon-heart">
</span>
</span>
</button>
I know your time is valuable and I appreciate your attention and thank you in advance

for checking class you have to use .hasClass('your class name') or if you want to check background color if($(this).css('background') == "red")
$('button').on('click', function(){
$(this).toggleClass('faved');
if ($(this).hasClass('faved')) {
alert("red");
} else {
alert("empty");
}
});

CSS animation reset transform

I have a CSS clock, the minute hand has the following animation styling:
animation: a36016 3600s normal infinite steps(3600,end);
This allows it to move along as the minutes go by.
When I load the page the minutes hand has a rotation set like this:
transform:rotate(180deg);
Using setInterval I am trying to reSync it. So for example after 10 minutes if I get the rotation for example as 210deg, and then I change it like this:
$('#clock .mm').css( {'transform': 'rotate(210deg)'});
The problem is that it doesn't actually set the degrees to 210, for some reason it adds to whatever amount of degrees the animation has already moved. So it becomes 210deg plus whatever amount it has already moved.
Can someone tell me how I can adjust the animation styling so this doesnt happen, if change the rotation usig javascript to whatever it is, it should set it to that regardless of how many degrees it has already moved.
Thanks
* BELOW IS THE FULL CODE *
PHP
<?php
date_default_timezone_set("Europe/London");
$hour = date("g");
$minutes = date("i");
$seconds = date("s");
if ($hour>=12){
$hour=0;
}
$hourinseconds = ($hour*3600)+($minutes*60)+$seconds;
$minutesinseconds = ($minutes*60)+$seconds;
$hour_degree = ($hourinseconds/43200)*360;
$minutes_hand = ($minutesinseconds/3600)*360;
$seconds_hand = ($seconds/60)*360;
?>
HTML, CSS and jQuery
$(document).ready(function(){
function SyncTime(){
$.getJSON('ajax.php', function(data) {
$('#clock .hh').css( {'transform': 'rotate('+data.hour+'deg)'});
$('#clock .mm').css( {'transform': 'rotate('+data.min+'deg)'});
});
}
setInterval(SyncTime,5000);
});
body {
overflow: hidden;
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
/*** Font for numbers ***/
#font-face {
font-family: 'WallClock';
src: url('fonts/wallclock.eot');
}
#font-face {
font-family: 'WallClock';
src: url('fonts/wallclock.woff') format('woff'), url('fonts/wallclock.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'WallClockPS';
src: url('fonts/wallclock.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
/*** Clock rules. Pure CSS ***/
#clock {
transition: all 0.5s ease;
}
#a {
width: 100em;
height: 100em;
position: relative;
border-radius: 50em;
background: #eee;
box-shadow: inset 0.5em -0.5em 0 #ccc, inset 1.7em -1.7em 0 #555, inset -0.3em -0.4em 0 #999, inset -0.3em 0.2em 0 #ccc, inset -1em -1em 0 #555, 1em 3em 2em rgba(0, 0, 0, 0.3);
}
#b {
width: 94em;
height: 94em;
top: 3em;
left: 3em;
position: relative;
border-radius: 47em;
background: #fff;
box-shadow: inset 0.4em 0 0 #fff, inset 0 -0.6em 0 #ddd, inset 1.6em -0.8em 0 #222, inset -1.6em 0.8em 0 #222, inset 2em 2em 0 #222, 0.6em -0.3em 0 #999, -1em 1em 0 #777, -1.3em -2em 0 #fff, 1.3em 2em 0 #222, 1.3em 3em 0 #999;
}
#c {
width: 89em;
height: 89em;
top: 2.5em;
left: 2.5em;
position: relative;
border-radius: 44.5em;
background: #f4f5f6;
box-shadow: inset 0.5em 1em 0.5em rgba(0, 0, 0, 0.4), inset 1em 2em 2em rgba(0, 0, 0, 0.3), inset 0 0.5em 3em rgba(0, 0, 0, 0.1), -1.6em 0.8em 0 #444, 1.6em -0.8em 0 #444;
}
#d {
width: 88em;
height: 88em;
top: 0.5em;
left: 0.5em;
position: relative;
border-radius: 44em;
}
#e {
width: 81.8em;
height: 81.8em;
padding-top: 40.9em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
left: 2.9em;
top: 2.9em;
position: absolute;
border: solid 0.4em #777;
border-radius: 40.9em;
}
#ii {
padding-left: 43.4em;
position: absolute;
}
b,
i {
height: 82em;
position: absolute;
border: solid 0 #222;
border-width: 3em 0;
display: block;
}
b {
width: 1.2em;
}
i {
width: 0.2em;
}
b>i,
i>i {
transform: rotate(6deg);
margin-top: -3em;
}
b>b {
transform: rotate(30deg);
margin-top: -3em;
}
b>i {
left: 0.3em;
}
#f,
#g {
font: 12em/1.0em WallClock, sans-serif;
text-align: center;
width: 6.8em;
color: #222;
}
#g>u>u {
letter-spacing: 0.1em;
}
#g>u>u>u {
letter-spacing: 0;
}
u {
display: block;
line-height: 1em;
text-decoration: none;
}
u>u>u>u {
margin: 0.5em -0.55em;
padding: 0 0.05em;
}
u>u>u {
margin: 0.0em -1.75em;
padding: 0 0.7em;
}
u>u {
margin: -0.55em 0;
text-align: right;
padding: 0 1.65em;
}
#f {
margin-top: -3.37em;
}
#g {
margin-top: -6em;
}
#g u>u {
text-align: left;
}
#q {
font: 2.2em/1em Segoe UI, Helvetica, sans-serif;
text-align: center;
margin-top: -11.5em;
color: #555;
}
.ss,
.mm,
.hh {
width: 80em;
height: 80em;
top: 4em;
left: 4em;
position: absolute;
}
.hh {
transform: rotate(-55deg);
}
.mm {
transform: rotate(60deg);
}
.ss {
animation: tick 1s normal infinite steps(25, end);
}
#keyframes tick {
0% {
transform: rotate(0deg);
}
12% {
transform: rotate(6deg);
}
100% {
transform: rotate(6deg);
}
}
.s {
width: 1em;
height: 48em;
top: 6em;
left: 39.5em;
position: relative;
background: #a00;
outline: 1px solid transparent;
animation: a360_10 60s normal infinite steps(60, end);
}
.sr {
width: 3em;
height: 3em;
background: #a00;
margin: -9.5em 0 0 38.4em;
border-radius: 1.5em;
}
#keyframes a360_10 {
0% {
transform: translate(0, 10em) rotate(0deg) translate(0, -10em)
}
100% {
transform: translate(0, 10em) rotate(360deg) translate(0, -10em)
}
}
.m {
height: 48em;
left: 38.9em;
width: 2.2em;
position: relative;
background: #222;
border: 0 0 32em 0;
animation: a36016 3600s normal infinite steps(3600, end);
outline: 1px solid transparent;
}
#keyframes a36016 {
0% {
transform: translate(0, 16em) rotate(0deg) translate(0, -16em);
}
100% {
transform: translate(0, 16em) rotate(360deg) translate(0, -16em);
}
}
.mr {
width: 5em;
height: 5em;
background: #222;
margin: -10.5em 0 0 37.4em;
border-radius: 2.5em;
}
.h {
width: 3em;
height: 34em;
left: 38.5em;
position: relative;
background: #222;
margin-top: 13em;
outline: 1px solid transparent;
animation: a36010 43200s normal infinite steps(43200, end);
}
#sh {
width: 80em;
height: 80em;
top: 2em;
left: 1em;
position: absolute;
}
#sh .s,
#sh .m,
#sh .h,
#sh .mr {
background: #ddd;
xbox-shadow: 0 0 0.5em #ddd, 0 0 0.25em #ddd;
}
#k {
width: 88em;
height: 88em;
position: absolute;
border-radius: 44em;
box-shadow: inset 4.5em 9em 0.5em rgba(250, 252, 253, 0.2);
}
/* Vendor CSS prefixes */
#css3prefixed:checked~#clock {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#css3prefixed:checked~#clock b>i,
#css3prefixed:checked~#clock i>i,
#css3fixed:checked~#clock b>i,
#css3fixed:checked~#clock i>i {
-webkit-transform: rotate(6deg);
}
#css3prefixed:checked~#clock b>b,
#css3fixed:checked~#clock b>b {
-webkit-transform: rotate(30deg);
}
#css3prefixed:checked~#clock .hh,
#css3fixed:checked~#clock .hh {
-webkit-transform: rotate(-55deg);
}
#css3prefixed:checked~#clock .mm,
#css3fixed:checked~#clock .mm {
-webkit-transform: rotate(60deg);
}
#css3prefixed:checked~#clock .ss,
#css3fixed:checked~#clock .ss {
-webkit-animation: tick 1s normal infinite steps(25, end);
}
#-webkit-keyframes tick {
0% {
-webkit-transform: rotate(0deg);
}
12% {
-webkit-transform: rotate(6deg);
}
100% {
-webkit-transform: rotate(6deg);
}
}
#css3prefixed:checked~#clock .s,
#css3fixed:checked~#clock .s {
-webkit-animation: a360_10 60s normal infinite steps(60, end);
}
#-webkit-keyframes a360_10 {
0% {
-webkit-transform: translate(0, 10em) rotate(0deg) translate(0, -10em)
}
100% {
-webkit-transform: translate(0, 10em) rotate(360deg) translate(0, -10em)
}
}
#css3prefixed:checked~#clock .m,
#css3fixed:checked~#clock .m {
-webkit-animation: a36016 3600s normal infinite steps(3600, end);
}
#-webkit-keyframes a36016 {
0% {
-webkit-transform: translate(0, 16em) rotate(0deg) translate(0, -16em);
}
50% {
-webkit-transform: translate(0, 16em) rotate(180deg) translate(0, -16em);
}
100% {
-webkit-transform: translate(0, 16em) rotate(360deg) translate(0, -16em);
}
}
#css3prefixed:checked~#clock .h,
#css3fixed:checked~#clock .hh {
-webkit-animation: a36010 43200s normal infinite steps(43200, end);
}
/* Fixes */
#css3fixed:checked~#clock {
transition: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
}
.fixed {
display: none;
}
/* Following will fix problems with cascaded transformations
are critical in Safari, Mobile Safari, Opera,
non-critical in Chrome and Firefox */
</style><!--[if !IE]>--><style>#css3fixed:checked~#clock .fixed {
display: block;
}
#css3fixed:checked~#clock .pure {
display: none;
}
</style><!-- <![endif]--><style>#css3fixed:checked~#clock b:nth-child(2) {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
#css3fixed:checked~#clock b:nth-child(3) {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
}
#css3fixed:checked~#clock b:nth-child(4) {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#css3fixed:checked~#clock b:nth-child(5) {
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
#css3fixed:checked~#clock b:nth-child(6) {
transform: rotate(150deg);
-webkit-transform: rotate(150deg);
}
#css3fixed:checked~#clock i:nth-child(2) {
transform: rotate(12deg);
-webkit-transform: rotate(12deg);
}
#css3fixed:checked~#clock i:nth-child(3) {
transform: rotate(18deg);
-webkit-transform: rotate(18deg);
}
#css3fixed:checked~#clock i:nth-child(4) {
transform: rotate(24deg);
-webkit-transform: rotate(24deg);
}
/* IE10 fix */
#media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
#css3fixed:checked~#clock i,
#css3fixed:checked~#clock b {
border-left: solid 0px #fff;
border-right: solid 0px #fff;
}
}
/* Opera rotation fix */
#css3fixed:checked~#clock .s {
animation: a360_10of 60s normal infinite steps(60, end);
}
#keyframes a360_10of {
0% {
transform: translate(0, 10em) rotate(0deg) translate(0, -10em);
-o-transform: translate(0, 3.2em) rotate(0deg) translate(0, -3.2em)
}
100% {
transform: translate(0, 10em) rotate(360deg) translate(0, -10em);
-o-transform: translate(0, 3.2em) rotate(360deg) translate(0, -3.2em)
}
}
/* Chrome/Windows antialiasing bug. */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#css3fixed:checked~#clock #f,
#css3fixed:checked~#clock #g {
font: 12em/1em WallClockPS, sans-serif;
}
#css3fixed:checked~#clock #g {
-webkit-transform: translate(0, -0.05em);
}
}
/* Clock size selection */
#clock {
font-size: 5px;
}
#size25percent:checked~#clock {
font-size: 25%
}
#size250px:checked~#clock {
font-size: 2.5px
}
#size500px:checked~#clock {
font-size: 5px
}
#size10em:checked~#clock {
font-size: 0.1em
}
#size25percent:checked~#clock {
font-size: 25%
}
/* Controls */
input {
width: 1em;
position: relative;
valign: top;
}
input[type=checkbox] {
left: 0.2em;
}
input+label {
padding: 0.2em 0.4em 0.3em 1.4em;
margin-left: -1.4em;
border-radius: 0.3em;
transition: background 0.5s;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
}
input:checked+label {
background: #ABD8F2;
}
input,
label {
line-height: 1.8em;
}
label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#clock {
position: absolute;
right: 55%;
top: 50px;
display: block;
}
#clock {
margin-top: 4em;
}
body #clock .hh {
transform: rotate(<?php echo $hour_degree;
?>deg);
}
#clock .mm {
transform: rotate(<?php echo $minutes_hand;
?>deg);
-webkit-transform: rotate(<?php echo $minutes_hand;
?>deg);
-ms-transform: rotate(<?php echo $minutes_hand;
?>deg);
}
#clock .ss {
animation: tick 1s normal infinite steps(25, end);
-webkit-animation: tick 1s normal infinite steps(25, end);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div style="width:700px;;position:absolute;left:748px;top:84px;">Content</div>
<div id="clock" style="margin-top:84px;">
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<div id="sh">
<div class="hh">
<div class="h"></div>
</div>
<div class="mm">
<div class="m"></div>
<div class="mr"></div>
</div>
<div class="ss">
<div class="s"></div>
</div>
</div>
<div id="ii">
<div class="pure">
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i></b>
</b>
</b>
</b>
</b>
</b>
</div>
<!-- this is need only to show
bugs-free variant in many browsers -->
<div class="fixed">
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
</div>
<!-- till here -->
</div>
<div id="e">
<div id="f">
<u>12<u>1<u>2<u>3</u>4</u>5</u></u>
</div>
<div id="g">
<u><u>11<u>10<u>9</u>8</u>7</u>6</u>
</div>
<div id="q"> quartz</div>
</div>
<div class="hh">
<div class="h"></div>
</div>
<div class="mm">
<div class="m"></div>
<div class="mr"></div>
</div>
<div class="ss">
<div class="s"></div>
<div class="sr"></div>
</div>
<div id="k"></div>
</div>
</div>
</div>
</div>
<div id="css3icon"/>

This removes the value of the CSS property entirely, will that help?
// Reset transform
$('#clock .mm').css({'transform': ''});

This issue is not related to changing transform by jQuery or initial value of transform by CSS.
if you have following example:
<!doctype html>
<html lang="en">
<head>
<title></title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.a{width: 100px; height:100px; margin: 100px auto; background: #000}
.b{height: 100px; width: 100px;transform:rotate(10deg); background: red;}
</style>
</head>
<body>
<div class="a">
<div class="b">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script language="javascript">
$('.b').css( {'transform': 'rotate(20deg)'});
</script>
</body>
</html>
You see that it change just 10 degree and even you change $('.b').css( {'transform': 'rotate(10deg)'}); it does not change.
the problem is related to something else or even a logical error.
According to codes that you sent if you change your jQuery to this:
$(document).ready(function(){
function SyncTime(){
$('#clock .hh').css( {'transform': 'rotate(50deg)'});
$('#clock .mm').css( {'transform': 'rotate(50deg)'});
}
setInterval(SyncTime,5000);
});
After 5 seconds it will redirect to a location and never change its position. the calculation time that pass from ajax.php has issue

Animating left to right underline using box-shadow

How can I go about animating a fake box-shadow underline that have under my the link? I would like to have the underline go from left to right.
I am using a script that changes the color of the underline everything that it loads the page it alternates between three colors.
I have tried to add "animation: stretchRight;" to a.red, a.blue, a.yellow, but it does not seem to work.
I can use the use the stretchRight class to other elements so I know that works well. I believe it has something to do with the script.
Below is the code I am working on.
Can anyone of you wizards help me with this problem?
body {
background-color: #FFFFFF;
margin: 0px;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
#wotd {
text-align: center;
margin: 0;
font-weight: bold;
cursor: pointer;
clear: none;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 2s;
}
a, a:visited, a:hover {
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
a.red {
box-shadow: inset 0 -1.3vw 0 0 #DB3069;
}
a.yellow {
box-shadow: inset 0 -1.3vw 0 0 #fffd35;
}
a.blue {
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* This is WiP */
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
#-webkit-keyframes stretchRight {
0% {
-webkit-transform: scaleX(0);
}
100% {
-webkit-transform: scaleX(1);
}
}
#object {
display: block;
height: 180px;
width: 180px;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
visibility: visible;
}
.eee {
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
animation: stretchRight;
-webkit-animation: stretchRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
<body>
<div class="container">
<div id="wotd">blah blah blueee<a id="decor" href="https://stackoverflow.com/questions/44692808/integrating-a-script-within-css">pew pew paw</a></div>
<div id="object" class="eee"></div>
</div>
</body>
<script type="text/javascript">
var classes = ['red', 'blue', 'yellow'];
var random_class = classes[Math.floor(Math.random() * classes.length)];
var title = document.getElementById('decor');
classes.forEach((el) => {
title.classList.remove(el);
});
title.classList.add(random_class);
</script>
</html>

You need to specify the animation on the link itself and the #keyframes must specify the CSS property you want to animate.
var classes = ['red', 'blue', 'yellow'];
var random_class = classes[Math.floor(Math.random() * classes.length)];
var title = document.getElementById('decor');
classes.forEach((el) => {
title.classList.remove(el);
});
title.classList.add(random_class);
body {
background-color: #FFFFFF;
margin: 0px;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
#wotd {
text-align: center;
margin: 0;
font-weight: bold;
cursor: pointer;
clear: none;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 2s;
}
a, a:visited, a:hover {
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
a.red {
box-shadow: inset 0 -1.3vw 0 0 #DB3069;
}
a.yellow {
box-shadow: inset 0 -1.3vw 0 0 #fffd35;
}
a.blue {
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
border-bottom:none;
}
100% {
transform: scaleX(1);
border-bottom:1px solid black;
}
}
#decor {
animation-duration: 3s;
animation-name: stretchRight;
}
<div class="container">
<div id="wotd">blah blah blueee<a id="decor" href="https://stackoverflow.com/questions/44692808/integrating-a-script-within-css">pew pew paw</a></div>
<div id="object" class="eee"></div>
</div>

choose a specific css animation frame

I'm trying to make a spinner where it'll stop on a certain frame. I'm trying to use CSS for the animation to negate JS animations but not sure I can get it to stop on a specific frame. I've got a simple spinner with my 3 numbers here. I'd like to randomly get number 1-3(0-2) and have it stop on that given frame.
Is that possible with JS/cCSS?
body {
font-family: 'Lucida Grande', Verdana, Arial;
font-size: 12px;
}
#stage {
margin: 80px auto;
width: 600px;
height: 400px;
perspective: 5000;
}
#rotate {
margin: 0 auto;
width: 600px;
height: 400px;
}
.ring {
margin: 0 auto;
height: 110px;
width: 600px;
-webkit-transform-style: preserve-3d;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.ring > :nth-child(odd) {
background-color: #995C7F;
}
.ring > :nth-child(even) {
background-color: #835A99;
}
.poster {
position: absolute;
left: 250px;
width: 100px;
height: 100px;
opacity: 1;
color: rgba(0,0,0,1);
-webkit-border-radius: 10px;
}
.a {
transform: rotateX(0deg) translateZ(40px);
}
.b {
transform: rotateX(120deg) translateZ(40px);
}
.c {
transform: rotateX(240deg) translateZ(40px);
}
.done {
transform: rotate(0deg);
}
.poster > p {
font-family: 'Georgia', serif;
font-size: 36px;
font-weight: bold;
text-align: center;
margin-top: 28px;
}
#ring-1 {
-webkit-animation-name: x-spin;
-webkit-animation-duration: .6s;
}
#ring-2 {
-webkit-animation-name: back-y-spin;
-webkit-animation-duration: 4s;
}
#ring-3 {
-webkit-animation-name: y-spin;
-webkit-animation-duration: 3s;
}
#-webkit-keyframes x-spin {
0% { -webkit-transform: rotateX(360deg); }
50% { -webkit-transform: rotateX(180deg); }
100% { -webkit-transform: rotateX(0deg); }
}
#-webkit-keyframes y-spin {
0% { -webkit-transform: rotateY(0deg); }
50% { -webkit-transform: rotateY(180deg); }
100% { -webkit-transform: rotateY(360deg); }
}
#-webkit-keyframes back-y-spin {
0% { -webkit-transform: rotateY(360deg); }
50% { -webkit-transform: rotateY(180deg); }
100% { -webkit-transform: rotateY(0deg); }
}

It would be better to use css transitions for this. And yes, if you want to randomize the animation frame, definitely JavaScript. That way you can use it in code.
function goToNum(num) {
var angle = 0;
if (num == 2) {
angle = 110;
}
if (num == 1) {
angle = 220;
}
$('#ring-1').css('transform', 'rotateX(' + angle + 'deg)');
}
var rand = Math.floor(Math.random() * 3);
goToNum(rand);
JSFiddle: http://jsfiddle.net/foreyez/r8a4m0L5/

Change text color to match dynamic background color

I'm trying to change the color of my links on hover to match the background which is always changing. Here's a JSFiddle of what I have so far: https://jsfiddle.net/Lcz7gk72/
Basically, I want the "test#test.com" to match the body background color on hover.
Would appreciate any help. Unless it's really needed, I'd rather not use jQuery and keep this to just Javascript.
body {
font: 20px monospace;
color: #fff;
-webkit-font-smoothing: antialiased;
animation: pulse 60s infinite normal;
-webkit-animation: pulse 60s infinite normal;
-moz-animation: pulse 60s infinite normal;
-o-animation: pulse 60s infinite normal;
}
a {
color: #fff;
border-bottom: 1px dotted #fff;
text-decoration: none;
}
a:hover {
border-bottom: 1px solid #fff;
position: relative;
}
a:after {
display: block;
position: absolute;
left: 0;
bottom: 0px;
width: 0;
height: 20px;
background-color: #fff;
content: "";
transition: width 0.4s;
}
a:hover {
color: #fff;
}
a:hover:after {
width: 100%;
}
#keyframes pulse {
0% { background-color: #f00; }
25% { background-color: #0f0; }
50% { background-color: #00f; }
75% { background-color: #00a; }
100% { background-color: #0a0; }
}
#-webkit-keyframes pulse {
0% { background-color: #f00; }
25% { background-color: #0f0; }
50% { background-color: #00f; }
75% { background-color: #00a; }
100% { background-color: #0a0; }
}
#-moz-keyframes pulse {
0% { background-color: #f00; }
25% { background-color: #0f0; }
50% { background-color: #00f; }
75% { background-color: #00a; }
100% { background-color: #0a0; }
}
#-o-keyframes pulse {
0% { background-color: #f00; }
25% { background-color: #0f0; }
50% { background-color: #00f; }
75% { background-color: #00a; }
100% { background-color: #0a0; }
}
test#test.com

I'd suggest creating a new animation to animate the color property of the text shown on hover of the <a> element, and adding – or changing – a::after (or, indeed, the a:after) rules.
The changes are included, and explained, in the CSS below:
body {
font: 20px monospace;
color: #fff;
-webkit-font-smoothing: antialiased;
animation: pulse 60s infinite normal;
-webkit-animation: pulse 60s infinite normal;
-moz-animation: pulse 60s infinite normal;
-o-animation: pulse 60s infinite normal;
}
a {
color: #fff;
border-bottom: 1px dotted #fff;
text-decoration: none;
/* I added this rule to the
base 'a' rule, to avoid the
otherwise ghastly jump
when un-hovering the <a>: */
position: relative;
}
a:hover {
border-bottom: 1px solid #fff;
}
a:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 20px;
background-color: #fff;
/*
slowed down significantly, to clearly
show the transition of the text as it
progresses across the element: */
transition: width 3s;
/*
Obtaining the text to show from the
custom data-attribute: */
content: attr(data-text);
/*
To hide the pseudo-element's
text in the non-hovered state: */
overflow: hidden;
/*
/linking to the animation: */
-webkit-animation: textPulse 60s infinite normal;
-moz-animation: textPulse 60s infinite normal;
-o-animation: textPulse 60s infinite normal;
animation: textPulse 60s infinite normal;
border-bottom: 1px solid transparent;
}
a:hover:after {
width: 100%;
}
#keyframes pulse {
0% {
background-color: #f00;
}
25% {
background-color: #0f0;
}
50% {
background-color: #00f;
}
75% {
background-color: #00a;
}
100% {
background-color: #0a0;
}
}
#-webkit-keyframes pulse {
0% {
background-color: #f00;
}
25% {
background-color: #0f0;
}
50% {
background-color: #00f;
}
75% {
background-color: #00a;
}
100% {
background-color: #0a0;
}
}
#-moz-keyframes pulse {
0% {
background-color: #f00;
}
25% {
background-color: #0f0;
}
50% {
background-color: #00f;
}
75% {
background-color: #00a;
}
100% {
background-color: #0a0;
}
}
#-o-keyframes pulse {
0% {
background-color: #f00;
}
25% {
background-color: #0f0;
}
50% {
background-color: #00f;
}
75% {
background-color: #00a;
}
100% {
background-color: #0a0;
}
}
#keyframes textPulse {
0% {
color: #f00;
}
25% {
color: #0f0;
}
50% {
color: #00f;
}
75% {
color: #00a;
}
100% {
color: #0a0;
}
}
#-webkit-keyframes textPulse {
0% {
color: #f00;
}
25% {
color: #0f0;
}
50% {
color: #00f;
}
75% {
color: #00a;
}
100% {
color: #0a0;
}
}
#-moz-keyframes textPulse {
0% {
color: #f00;
}
25% {
color: #0f0;
}
50% {
color: #00f;
}
75% {
color: #00a;
}
100% {
color: #0a0;
}
}
#-o-keyframes textPulse {
0% {
color: #f00;
}
25% {
color: #0f0;
}
50% {
color: #00f;
}
75% {
color: #00a;
}
100% {
color: #0a0;
}
}
test#test.com
External JS Fiddle demo for experimentation and development.
Unfortunately the above solution does require you to ensure that the data-text attribute exists, and is filled with the appropriate text; with that in mind – and despite your preference to not rely upon JavaScript – I'd like to post another snippet that employs a JavaScript function to appropriately fill set, and fill, the data-text attribute on the relevant elements:
// using the Immediately-Invoked Function Expression ('IIFE')
// syntax to invoke the wrapped anonymous function without
// having to call it elsewhere:
(function() {
// getting all the elements, using document.querySelectorAll(),
// with the (atrociously long, but explanatory) class-name of
// 'showBodyBackgroundColoredTextOnHover' (by all means, please,
// choose a shorter class-name):
var elems = document.querySelectorAll('.showBodyBackgroundColoredTextOnHover');
// Using Function.prototype.call() to apply an Array
// method, Array.prototype.forEach(), on the
// Array-like NodeList returnd by querySelectorAll():
Array.prototype.forEach.call(elems, function(el) {
// the first argument of forEach() is the array-element
// of the Array over which we're currently iterating:
// using the HTMLElement.dataset to create the
// 'data-text' attribute/property value:
el.dataset.text = el.textContent;
});
})();
(function() {
var elems = document.querySelectorAll('.showBodyBackgroundColoredTextOnHover');
Array.prototype.forEach.call(elems, function(el) {
el.dataset.text = el.textContent.trim();
});
})();
body {
font: 20px monospace;
color: #fff;
-webkit-font-smoothing: antialiased;
animation: pulse 60s infinite normal;
-webkit-animation: pulse 60s infinite normal;
-moz-animation: pulse 60s infinite normal;
-o-animation: pulse 60s infinite normal;
}
a {
color: #fff;
border-bottom: 1px dotted #fff;
text-decoration: none;
/* I added this rule to the
base 'a' rule, to avoid the
otherwise ghastly jump
when un-hovering the <a>: */
position: relative;
}
a:hover {
border-bottom: 1px solid #fff;
}
a:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 20px;
background-color: #fff;
/*
slowed down significantly, to clearly
show the transition of the text as it
progresses across the element: */
transition: width 3s;
/*
Obtaining the text to show from the
custom data-attribute: */
content: attr(data-text);
/*
To hide the pseudo-element's
text in the non-hovered state: */
overflow: hidden;
/*
/linking to the animation: */
-webkit-animation: textPulse 60s infinite normal;
-moz-animation: textPulse 60s infinite normal;
-o-animation: textPulse 60s infinite normal;
animation: textPulse 60s infinite normal;
border-bottom: 1px solid transparent;
}
a:hover:after {
width: 100%;
}
#keyframes pulse {
0% {
background-color: #f00;
}
25% {
background-color: #0f0;
}
50% {
background-color: #00f;
}
75% {
background-color: #00a;
}
100% {
background-color: #0a0;
}
}
#-webkit-keyframes pulse {
0% {
background-color: #f00;
}
25% {
background-color: #0f0;
}
50% {
background-color: #00f;
}
75% {
background-color: #00a;
}
100% {
background-color: #0a0;
}
}
#-moz-keyframes pulse {
0% {
background-color: #f00;
}
25% {
background-color: #0f0;
}
50% {
background-color: #00f;
}
75% {
background-color: #00a;
}
100% {
background-color: #0a0;
}
}
#-o-keyframes pulse {
0% {
background-color: #f00;
}
25% {
background-color: #0f0;
}
50% {
background-color: #00f;
}
75% {
background-color: #00a;
}
100% {
background-color: #0a0;
}
}
#keyframes textPulse {
0% {
color: #f00;
}
25% {
color: #0f0;
}
50% {
color: #00f;
}
75% {
color: #00a;
}
100% {
color: #0a0;
}
}
#-webkit-keyframes textPulse {
0% {
color: #f00;
}
25% {
color: #0f0;
}
50% {
color: #00f;
}
75% {
color: #00a;
}
100% {
color: #0a0;
}
}
#-moz-keyframes textPulse {
0% {
color: #f00;
}
25% {
color: #0f0;
}
50% {
color: #00f;
}
75% {
color: #00a;
}
100% {
color: #0a0;
}
}
#-o-keyframes textPulse {
0% {
color: #f00;
}
25% {
color: #0f0;
}
50% {
color: #00f;
}
75% {
color: #00a;
}
100% {
color: #0a0;
}
}
test#test.com
External JS Fiddle demo for experimentation and development.

Categories

Resources