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
Related
Update
Adding a delay solved my problem:
setTimeout(() => price.classList.add("fade-it"), 100);
but this answer also worked for me
Original question
I have a fade-in effect on background color that should be repeated from time to time initiated by me.
I'm using pure CSS:
<style>
#-webkit-keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
#-moz-keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
#keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
.fade-it {
-webkit-animation: yellow-fade 1s ease-in-out 0s;
-moz-animation: yellow-fade 1s ease-in-out 0s;
-o-animation: yellow-fade 1s ease-in-out 0s;
animation: yellow-fade 1s ease-in-out 0s;
}
</style>
How do I restart this effect after it's already played once?
The code I have is not working after the first time:
var price = document.getElementById("price");
if (price.classList.contains("fade-it")) {
price.classList.remove("fade-it");
}
price.classList.add("fade-it");
You can accomplish this by removing the node from the DOM then adding it back. The append function does exactly that, just append the element to it's parentNode. Give the element it's own wrapper to be the parentNode that way it will not be reordered with other sibling-elements.
const price = document.getElementById("price");
const btn = document.getElementById("fade-price");
const fade = function() {
if (price.classList.contains("fade-it")) {
price.classList.remove("fade-it");
}
price.classList.add("fade-it");
}
document.addEventListener("DOMContentLoaded", function() {
fade()
});
btn.addEventListener("click", function() {
price.parentElement.append(price)
});
#-webkit-keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
#-moz-keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
#keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
.fade-it {
-webkit-animation: yellow-fade 1s ease-in-out 0s;
-moz-animation: yellow-fade 1s ease-in-out 0s;
-o-animation: yellow-fade 1s ease-in-out 0s;
animation: yellow-fade 1s ease-in-out 0s;
}
<div>
<h4 id="price">$9.99</h4>
</div>
<button id="fade-price">
fade
</button>
When I click on a button I want my div to animate. It seems only the show animation is working, but not the hide. The hide animation doesn't work at all even though the attribute values change.
$("#divShow").click(function() {
$('.parent').attr('isopen', 'true');
});
$("#divHide").click(function() {
$('.parent').attr('isopen', 'false');
});
.parent {
display: none; //hidden by default
width: 40px;
height: 40px;
background: blue;
}
#keyframes show {
50% {
transform: scale(1.03);
}
}
#keyframes hide {
50% {
transform: scale(0.97);
}
100% {
opacity: 0;
transform: scale(0.90);
}
}
[isopen="true"] {
display: block;
-webkit-animation: show .3s;
-moz-animation: show .3s;
-ms-animation: show .3s;
animation: show .3s;
}
[isopen="false"] {
-webkit-animation: hide .3s;
-moz-animation: hide .3s;
-ms-animation: hide .3s;
animation: hide .3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="divShow">Show</button>
<button id="divHide">Hide</button>
<div class="parent">
</div>
I think I got it working as you wanted. See here code snippet below.
Your show class has display block but when you remove it it gets right back to none. Just add the display none at the end of your hide animation.
Like this:
#keyframes hide {
50% {
transform: scale(0.97);
}
100% {
opacity: 0;
transform: scale(0.90);
display: none;
}
}
[isopen="false"] {
display: block;
animation: hide .3s forwards;
}
Code snippet:
$("#divShow").click(function() {
$('.parent').attr('isopen', 'true');
});
$("#divHide").click(function() {
$('.parent').attr('isopen', 'false');
});
.parent {
display: none; //hidden by default
width: 40px;
height: 40px;
background: blue;
}
#keyframes show {
50% {
transform: scale(1.03);
}
}
#keyframes hide {
50% {
transform: scale(0.97);
}
100% {
opacity: 0;
transform: scale(0.90);
display: none;
}
}
[isopen="true"] {
display: block;
-webkit-animation: show .3s;
-moz-animation: show .3s;
-ms-animation: show .3s;
animation: show .3s;
}
[isopen="false"] {
display: block;
-webkit-animation: hide .3s forwards;
-moz-animation: hide .3s forwards;
-ms-animation: hide .3s forwards;
animation: hide .3s forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="divShow">Show</button>
<button id="divHide">Hide</button>
<div class="parent">
</div>
With the help of this answer: https://stackoverflow.com/a/15407098/2181514
you can add forwards to your animations so that they keep the last (100%) keyframe.
Add display:block to [isopen=false] to ensure it doesn't hide immediately then:
animation: hide .3s forwards;
Updated snippet:
$("#divShow").click(function() {
$('.parent').attr('isopen', 'true');
});
$("#divHide").click(function() {
$('.parent').attr('isopen', 'false');
});
.parent {
display: none;
width: 40px;
height: 40px;
background: blue;
}
#keyframes show {
50% {
transform: scale(1.03);
}
}
#keyframes hide {
50% {
transform: scale(0.97);
}
100% {
opacity: 0;
transform: scale(0.90);
}
}
[isopen="true"] {
display: block;
-webkit-animation: show .3s;
-moz-animation: show .3s;
-ms-animation: show .3s;
animation: show .3s;
}
[isopen="false"] {
display: block;
-webkit-animation: hide .3s forwards;
-moz-animation: hide .3s forwards;
-ms-animation: hide .3s forwards;
animation: hide .3s forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="divShow">Show</button>
<button id="divHide">Hide</button>
<div class="parent">
</div>
Can be done simply, efficiently with less line of code using transition
$("#divShow").click(function() {
$('.parent').addClass('show');
});
$("#divHide").click(function() {
$('.parent').removeClass('show');
});
.parent {
width: 40px;
height: 40px;background: blue;
transform: scale(0.97);
transition: all 0.3s;
opacity:0;
}
.show {
opacity:1;
transform: scale(1.03);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="divShow">Show</button>
<button id="divHide">Hide</button>
<div class="parent">
</div>
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>
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;
}
I am working with a chat script. I have no control over any javascript, only CSS. I was wondering if it is possible to get the posts to fade in, as they are added, with only CSS3.
Here is a simplified example of the chat script:
http://jsfiddle.net/CF4pj/1/
<a class="click" href="#/">click</a>
<div class="stuff"></div>
<script>
$("a.click").click(function() {
$("div.stuff").append("<div class='lol'>text text text text text</div>");
});
</script>
Is there any CSS3 (only CSS3, no javascript) I could add to the script above to make the new "posts" fade in?
Here you go...
div.click {
background:yellow;
display:inline;
}
div.lol {
padding:5px;
border:1px solid green;
margin:5px 0;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Check out this fiddle...jsfiddle
You could use something like this:
<code>
.lol {
opacity: 0;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
</code>