Infinite border color loop - javascript

I want to have this effect, but not on the whole body background but just on the border of one of my div's. ( http://jsfiddle.net/ANMPt/ )
#-webkit-keyframes blink {
0% { background:red; }
50% { background:green;}
100% { background:red; }
}
#-moz-keyframes blink {
0% { background:red; }
50% { background:green;}
100% { background:red; }
}
#-ms-keyframes blink {
0% { background:red; }
50% { background:green;}
100% { background:red; }
}
body{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
How do I target just the border?
Or: if anyone has a better solution to get an infinite loop of changing border colors in CSS or JavaScript: i am all ears :-)
Thanks!

You are applying it to the body! Do it for div
div {
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
Fiddle: http://jsfiddle.net/praveenscience/ANMPt/160/
But, if you say it is for border, do it for border-color not for background!
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
div {
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
border: 2px solid;
}
Fiddle: http://jsfiddle.net/praveenscience/ANMPt/167/

Animate border-color instead of background:
#keyframes blink {
0% { border-color: red; }
50% { border-color: green;}
100% { border-color: red; }
}
body {
border: 15px solid;
animation: blink 1s infinite;
}
Some browsers may need vendor prefixes
Demo

http://jsfiddle.net/ANMPt/162/
Change it to border-color.
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
body{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
border: 20px solid red; /* cant animate border without a border... */
height: 200px; / * for illustration purpose */
}

Apply it to the right property (border-color instead of background) and to the right element (it's better to use a class selector, so the effect can be applied to any element instead that only to divs).
Also don't forget to use (always as last) the default #keyframe syntax other than the prefixed ones.
Demo
HTML
<div class="animatedBorder"></div>
CSS
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
.animatedBorder{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
div.animatedBorder{
margin: 20px;
width: 100px;
height: 100px;
border: 5px solid transparent;
}

The FIX is Animating border-color instead of background
But if you need to add this effect to a div
simply add a divinside the body
then change the background in css to border-color property
DEMO
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
div{
border:2px solid;
width:200px;
height:200px;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}

#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
div{
border:solid 1px red;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}

Replace all occurrences of background with border-color and then use them on your div-element instead of the body.
You probably have to define a border for the div first (like #000000 1px solid) in order to animate it.

http://jsfiddle.net/ANMPt/165/
You need to change the style for the animation definitions:
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
And define a border for your div:
#myDiv{
height: 300px;
width:300px;
border-width:5px;
border-style:solid;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}

Related

How to add a fading animation to my sldieshow

I have been trying to make this animation fade and not change abruptly, any ideas?
I tried this code:
<script>
var i = 0;
var images = [];
var slideTime = 3000; // 3 seconds
images[0] = '/includes/img/inmobg1.webp';
images[1] = '/includes/img/inmobg2.jpg';
function changePicture() {
document.getElementById('bg_static').style.backgroundImage = 'url(' + images[i] + ')';
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout(changePicture, slideTime);
}
window.onload = changePicture;
</script>
#bg_static{ background: #3d3d3d; background-position:bottom; background-size: cover; background-color:#000; background-repeat: no-repeat; height: 340px; width: 100%; left: 0; margin-left: 0; top: 60px; position: absolute; z-index: -1001; }
<div id="bg_static"></div>
You didn't provide enough info but i think you want something like this:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
/* The style below is just for the appearance of the example div */
.style {
width:90vw; height:90vh;
text-align:center;
padding-top:calc(50vh - 50px);
margin-left:5vw;
border:4px double #F00;
background-color:#000;
}
.style p {
color:#fff;
font-size:50px;
}
<div class="style fade-in">
<p>[content]</p>
</div>
User css animation and add animation class to that element whenever you want to animate the element.

Jquery failing to add class to elements in Mozilla Firefox

So I'm adding animation classes to a body element (and the tab element) on the click of the tab using css animation and jquery addClass. It works just fine in Chrome but in Firefox only the tab gets the animation class added...
Here's my jquery;
$('.lightboxContentReplace').on('click', '.v4-til-tab-label', function(event) {
var target = $(event.target);
var targetID = target.attr('data-label');
var content = $("[data-content=" + targetID + "]");
$(".v4-til-tab-label").removeClass('tab-label-animation');
$(".v4-til-tab-content").removeClass('tab-content-animation');
target.addClass('tab-label-animation');
content.addClass('tab-content-animation');
$(".v4-til-tab-content").hide();
$("[data-content=" + targetID + "]").show(); });
and here's my css;
#-webkit-keyframes tab-label-focus {
0% { top: 0;}
100% {top: -5px; border-bottom: 2px solid rgba(0, 188, 141, 0.4)}
}
#-moz-keyframes tab-label-focus {
0% { top: 0;}
100% {top: -5px; border-bottom: 2px solid rgba(0, 188, 141, 0.4)}
}
#-o-keyframes tab-label-focus {
0% { top: 0;}
100% {top: -5px; border-bottom: 2px solid rgba(0, 188, 141, 0.4)}
}
#keyframes tab-label-focus {
0% { top: 0;}
100% {top: -5px; border-bottom: 2px solid rgba(0, 188, 141, 0.4)}
}
.tab-label-animation {
-webkit-animation: tab-label-focus .25s forwards;
-moz-animation: tab-label-focus .25s forwards;
-o-animation: tab-label-focus .25s forwards;
animation: tab-label-focus .25s forwards;
outline: none;
}
#-webkit-keyframes tab-content-focus {
0% { opacity: 0;}
100% {opacity: 100%;}
}
#-moz-keyframes tab-content-focus {
0% { opacity: 0;}
100% { opacity: 1;}
}
#-o-keyframes tab-content-focus {
0% { opacity: 0;}
100% {opacity: 100%;}
}
#keyframes tab-content-focus {
0% { opacity: 0;}
100% { opacity: 1;}
}
.tab-content-animation {
-webkit-animation: tab-content-focus .75s forwards;
-moz-animation: tab-content-focus .75s forwards;
-o-animation: tab-content-focus .75s forwards;
animation: tab-content-focus .75s forwards;
}
Any suggestions would be greatly appreciated!

Safari is not stopping the CSS3 animation

my target is to animate a loading spinner. After a ajax call is finished the spinner should finish the last rotation but stop than. In FF, Chrome and Opera it is working fine with just adding a class with
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
but in Safari (11.1.2) it is still running.
I think it is just something small to change but I don't find it. My idea is that safari doesn't let me change the animation while running so I can't change.
Code:
function stop()
{
document.getElementById("box").classList.add("stop");
}
CSS:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: animationRotateFrames linear 2s;
animation: animationRotateFrames linear 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.stop
{
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
}
button
{
margin-top: 40px;
padding: 20px;
}
#-moz-keyframes animationRotateFrames{
0% {
-moz-transform: rotate(0deg) ;
}
100% {
-moz-transform: rotate(359deg) ;
}
}
#-webkit-keyframes animationRotateFrames {
0% {
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(359deg) ;
}
}
#keyframes animationRotateFrames{
0% {
transform: rotate(0deg) ;
}
100% {
transform: rotate(359deg) ;
}
}
HTML
<div id="box"></div>
<button onclick="stop()">Stop</button>
Just as a demo:
JSFiddle

Apply css if in certain section

I am trying to add css if user is in certain section, however I am not able to achieve it. The css is this(it animates my bars):
.swift { width:70%; -moz-animation:swift 2s ease-out; -webkit-animation:swift 2s ease-out; }
.java { width:50%; -moz-animation:java 2s ease-out; -webkit-animation:java 2s ease-out; }
.python { width:60%; -moz-animation:python 2s ease-out; -webkit-animation:python 2s ease-out; }
.backend { width:30%; -moz-animation:backend 2s ease-out; -webkit-animation:backend 2s ease-out; }
.html5 { width:55%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
.css3 { width:55%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
#-moz-keyframes swift { 0% { width:0px;} }
#-moz-keyframes java { 0% { width:0px;} }
#-moz-keyframes python { 0% { width:0px;} }
#-moz-keyframes backend { 0% { width:0px;} }
#-moz-keyframes html5 { 0% { width:0px;} }
#-moz-keyframes css3 { 0% { width:0px;} }
#-webkit-keyframes swift { 0% { width:0px;} }
#-webkit-keyframes java { 0% { width:0px;} }
#-webkit-keyframes python { 0% { width:0px;} }
#-webkit-keyframes backend { 0% { width:0px;} }
#-webkit-keyframes html5 { 0% { width:0px;} }
#-webkit-keyframes css3 { 0% { width:0px;} }
And this is the way, I detect if user is in the certain section:
$(function(){
$(window).bind('scroll', function() {
$('#skill-section').each(function() {
var post = $(this);
var position = post.position().top - $(window).scrollTop();
if (position <= 0) {
post.addClass('stye', ''); // I tried to add the css here, but it didn't work
}
}
});
});
});
I want those blue bars to go from left to right only if user is in certain section. Because right now it does it on page load and user may not see it.
You have an extra }); at the end of the script and missing an ) for the each() method on the end. Also, you can't use each on an id, you should use a class instead, ids have to be unique. See the working snippet below:
$(function() {
$(window).bind('scroll', function() {
$('.skill-section').each(function() { //added class instead of id
var post = $(this);
var position = post.position().top - $(window).scrollTop();
if (position <= 0) {
post.addClass('stye');
}
});// added the missing ")" here
});
});
//removed the extra "});" from here
.swift { width:70%; -moz-animation:swift 2s ease-out; -webkit-animation:swift 2s ease-out; }
.java { width:50%; -moz-animation:java 2s ease-out; -webkit-animation:java 2s ease-out; }
.python { width:60%; -moz-animation:python 2s ease-out; -webkit-animation:python 2s ease-out; }
.backend { width:30%; -moz-animation:backend 2s ease-out; -webkit-animation:backend 2s ease-out; }
.html5 { width:55%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
.css3 { width:55%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
#-moz-keyframes swift { 0% { width:0px;} }
#-moz-keyframes java { 0% { width:0px;} }
#-moz-keyframes python { 0% { width:0px;} }
#-moz-keyframes backend { 0% { width:0px;} }
#-moz-keyframes html5 { 0% { width:0px;} }
#-moz-keyframes css3 { 0% { width:0px;} }
#-webkit-keyframes swift { 0% { width:0px;} }
#-webkit-keyframes java { 0% { width:0px;} }
#-webkit-keyframes python { 0% { width:0px;} }
#-webkit-keyframes backend { 0% { width:0px;} }
#-webkit-keyframes html5 { 0% { width:0px;} }
#-webkit-keyframes css3 { 0% { width:0px;} }
.skill-section{
background: #adadad;
width: 100px;
height: 600px;
}
.stye{
background: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='skill-section'></div>
<div class='skill-section'></div>
<div class='skill-section'></div>

Pulsate text CSS3 only?

Is it possible to make a pulsating text effect where given a string of text "Hello World", every few seconds it eases from green to blue, then blue to green, green to blue, blue to green without a single line of javascript? (does there happen to be any SCSS or SASS shortcuts?)
Here's the CSS3 for what you want:
.textClass {
-webkit-animation: color_change 1s infinite alternate;
-moz-animation: color_change 1s infinite alternate;
-ms-animation: color_change 1s infinite alternate;
-o-animation: color_change 1s infinite alternate;
animation: color_change 1s infinite alternate;
}
#-webkit-keyframes color_change {
from { color: blue; }
to { color: green; }
}
#-moz-keyframes color_change {
from { color: blue; }
to { color: green; }
}
#-ms-keyframes color_change {
from { color: blue; }
to { color: green; }
}
#-o-keyframes color_change {
from { color: blue; }
to { color: green; }
}
#keyframes color_change {
from { color: blue; }
to { color: green; }
}
<p class="textClass">Hello World</p>
Read: http://tjvantoll.com/2012/02/20/CSS3-Color-Animations/ for more info
Yep:
#keyframes textColorChange {
0% {color: #0000ff;}
50% {color: #00ff00;}
100% {color: #0000ff;}
}
/* Use #-webkit-keyframes for Safari/Chrome */
#textElement {
animation: textColorChange 2s infinite;
}
/* Use -webkit-animation for Safari/Chrome */
Try this :
CSS:
#-webkit-keyframes altrclr{
0%{
color:red;
}
50%{
color:green;
}
}
#a{
margin:40%;
font-size:20px;
color:red;
-webkit-animation: altrclr 3s infinite alternate;
-webkit-transform:scale(4);
}
Html
<div id='a'>
Hello World
</div>
Demo

Categories