I have some text, it is one word (countinue) and i want to create that word will be black and after 31second it will be orange. I tried a lot of combinations with css but i can't create that effect. Here is my try :
JSFIDDLE
This is great but i don't know how to stop it.. i need only one time to show that text. It would be great if it is possible to opacity be 0 and after 31seconds opacity will be 1.
div
{
width:25px;
height:25px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-delay:2s;
/*Safari and Chrome*/
-webkit-animation:mymove 5s infinite;
-webkit-animation-delay:2s;
}
#keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
#-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
display: table-cell;
}
For stopping animation you can use
animation-iteration-count: 1;
JSfiddle http://jsfiddle.net/hD77v/1/
for changing background-color after 31 seconds
HTML
<div id="test">continue</div>
CSS
#test {
background-color : red;
}
Javascript
setTimeout(function(){
document.getElementById("test").style.backgroundColor="black";
},31000);
Do you want this:
from{left:0px;opacity:0;}
to{left:200px;opacity:1;}
Demo: http://jsfiddle.net/C8d6H/
Related
i want to trigger a animation based on css keyframes from javascript.
After reading through some answers on stackoverflow i tried using the jquery addClass function (click on the blue shape to start the animation):
https://codepen.io/valentin-wei/pen/KKMRrYK
With this approach i can only animate it once.
Is there a way to consistantly animate this shape back and forth by using javascript?
The solution you are looking for is either javascript OR wise use of css-keyframes:
In your codepen sample replace everything inside you css with this code:
test {
background-color: blue;
width:346px;
height:213px;
clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px);
}
.animate {
animation-duration: 3s;
animation-name: animtest;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: forward;
}
.reverseanimate {
animation-duration: 3s;
animation-name: animtest;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: reverse;
}
#keyframes animtest {
0% {
clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px)
}
100% {
clip-path: polygon(0.00px 168.65px, 0.00px 229.00px, 345.00px 30.17px, 292.64px 0.00px, 0.00px 168.65px)
}
}
then, replace everything inside you js with this code:
let target = document.getElementById('test');
setInterval(function(){
if ($(target).hasClass("animate")) {
$(target).removeClass("animate");
$(target).addClass("reverseanimate");
}
else {
$(target).addClass("animate");
$(target).removeClass("reverseanimate");
}
}, 3000);
NOTE: I couldn't make an account in codepen for some reason
After some further research i was able to fix this problem.
Instead of using the css animation property i use a transition now:
.animate {
transition: clip-path 3s;
clip-path: polygon(0.00px 168.65px, 0.00px 229.00px, 345.00px 30.17px, 292.64px 0.00px, 0.00px 168.65px)
}
.reverseanimate {
transition: clip-path 3s;
clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px)
}
I've also updated my codepen to provide a working example: https://codepen.io/valentin-wei/pen/KKMRrYK
I have two pictures that I want them to blink alternatively. I used CSS and javascript to blink individual picture but failed to make the second picture start to show up at the offset of the first picture. Is there any way to control the timing?
tried: first picture used the following and the second one reversed the opacity.
.blinking{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
animation: blink 1s infinite;
}
#-webkit-keyframes blink{
100%{ opacity:1;}
0%{opacity:0;}
}
#-moz-keyframes blink{
100%{ opacity:1;}
0%{opacity:0;}
}
#keyframes blink{
100%{ opacity:1;}
0%{opacity:0;}
}
Try using animation-delay
.blinking {
animation: blink 1s infinite;
}
.delay {
animation-delay: .5s;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="blinking">image 1</div>
<div class="blinking delay">image 2</div>
Check out the animation delay property. You may be able to time the delay to start when the fist image is mid-blink.
https://www.w3schools.com/cssref/css3_pr_animation-delay.asp
What I am trying to achieve is so that a marquee plays once when I click the button. My problem is that if I set the loop to 1 then it only plays once and then does nothing. My other problem is that it stops midway with my current code if I let go of the left mouse button. Or it stops where it was. Is there any way to make it either play once when the button is pressed and then play again whenever the button is pressed again and allow it to complete the loop completely. Here is the code, I am open to using java script instead of html. Here is my current code:
<marquee behavior="scroll" direction="up" scrollamount="30" id="marquee" height="40">
<p>+1</p>
</marquee>
<input type="button" id="gather" class="build" Value="play" onmousedown="document.getElementById('marquee').start()." onmouseup="document.getElementById('marquee').stop()" onload="document.getElementById('marquee').stop()">
You can use CSS keyframes and JQuery (or Javascript) in order to accomplish that.
In the example below, I'm using CSS rules to achieve the animation effect, and applying it adding/removing the span element from te DOM using JQuery.
Code example:
var marquee = '<span class="anim">+1</span>';
$('.btn').click(function(){
$('.anim').remove(); //remove the node if its there
$('.marquee').append(marquee); //append the node
});
.marquee{
width: 20px;
height: 20px;
overflow:hidden;
}
.marquee > span {
position:relative;
top:-100%;
left:0;
}
.anim{
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
0%,100% {
opacity:0;
top:100%;
}
50% {
opacity:1;
top:0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee"></div>
<button class="btn">Click here!</button>
Are you willing to use pure CSS?
It seems like you want a "+1" counter on click. You can accomplish this using CSS transitions. I'm going to use an anchor rather than an input, because you have more control over styling it.
You'll probably want to add some movement to it, change the timing, maybe swap linear to ease-out, but this is a starting point. Please consider it a proof of concept.
HTML:
a.play {
padding:6px 8px;
border-radius:4px;
background:#ccc;
border:1px solid #bbb;
text-decoration:none;
color:#111;
position:relative;
}
a.play:focus:before,
a.play:active:before {
Content:"+1";
position:absolute;
top:-16px;
left:6px;
color:#006699;
font-weight:bold;
-webkit-animation: fadeinout 1.3s linear forwards;
animation: fadeinout 1.3s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
10% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
10% { opacity: 1; }
}
<div style="height:60px;"></div>
Play
I’m wondering if it’s possible to have the text content of a div increase and decrease in font size repeatedly every second. This would give an effect where the text seems to move closer to the viewer before moving back, ideally it would be a smooth transition and wouldn’t look like a 2 frame gif.
This is my attempt using Javascript to change the font size every second:
<div id="textdiv">ZOOM</div>
<script>
function zoomtext(){
var textdiv = document.getElementById("textdiv");
textdiv.style.fontSize = "20px";
textdiv.style.fontSize = "25px";
setTimeout(zoomtext, 1000);
}
</script>
This isn’t working, and I’m not sure that this code would result in a smooth transition.
Perhaps it’s possible to make a smooth transition by changing the font by tenths of a pixel (for example: 20px, 20.1px, 20.2px …and so on until 25px, and then decreasing it back to 20px in the same way).
I’m worried that method might result in a Javascript function running constantly, which might slow down my page.
Is there a better way to get this effect?
Use CSS transitions with scale transformation. Font-size transitions are never smooth, and transitions on transform are cheap.
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.5);
}
Repetition can be accomplished through CSS3 animations:
.grow {
width: 100px;
text-align: center;
animation: grow-animation 2s linear infinite;
}
#keyframes grow-animation {
0% { transform: scale(1); }
50% {transform: scale(2); }
100% {transform: scale(1); }
}
You can achieve the same effect using CSS Animations. It's pretty easy, too, and far better than using Javascript for that.
You need to assign your element the animation property, which you then define.
#textdiv {
animation: textgrowth 1s infinite alternate;
}
#keyframes textgrowth {
0% {
font-size: 20px;
}
100% {
font-size: 25px;
}
}
Be sure to add alternate at the end of your CSS rule to make the animation go back and forth.
if it is only zoom at screen , and not growing the container too, then scale(); should be what you look for:
#textdiv {
-webkit-animation: zoom1-2 infinite 1s;
animation: zoom1-2 infinite 1s;
-webkit-transform-origin:0 0 ;
transform-origin:0 0 ;
font-size:20px;
}
#-webkit-keyframes zoom1-2 {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes zoom1-2 {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
<div id="textdiv">ZOOM</div>
<div>don't push me</div>
Instead of javascript you could use CSS animations.
Some example HTML:
<!DOCTYPE html>
<head>
<title>keyframes text size animation test</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p id="textdiv">ZOOM</p>
</body>
</html>
And the CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
#textdiv {
-webkit-animation: adjustText 1s infinite alternate;
-moz-animation: adjustText 1s infinite alternate;
-o-animation: adjustText 1s infinite alternate;
animation: adjustText 1s infinite alternate;
}
#keyframes adjustText {
from {
font-size: 20px;
}
to {
font-size: 25px;
}
}
Here's a working codepen of this example
Try this one:
function zoomtext(){
var textdiv = document.getElementById("textdiv");
var fontSize = textdiv.style.fontSize;
if (fontSize !== '48px') {
textdiv.style.fontSize = '48px';
}
else {
textdiv.style.fontSize = '21px';
}
setTimeout(zoomtext, 1000);
}
zoomtext();
<div id="textdiv">ZOOM</div>
I have this code
$('#uiAdminPanelMenu li a').hover( function(){
$(this).css('background-color', '#D3E1FA';
},
function(){
$(this).css('background-color', '#F4F4F4');
});
it changes the background color of the link, but I want it to change it slowly, kinda like fade effect, but for this case.
You can accomplish the same thing with CSS3 transitions. The result will almost be the exact same.
#uiAdminPanelMenu li a {
background-color: F4F4F4;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-o-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
#uiAdminPanelMenu li a:hover {
background-color: D3E1FA;
}
You want to use animate(), but you also need the Color Plugin for jQuery.
With the color plugin included, the following code works well:
$('#uiAdminPanelMenu li a').hover( function(){
$(this).animate({'background-color': '#D3E1FA'}, 'slow');
},
function(){
$(this).animate({'background-color': '#F4F4F4'}, 'slow');
});
May be its very late for answering this question, but still wanted to provide an alternate solution that worked for me. (Both the answers provided earlier will work).
I used CSS Animation and that worked better for me than jquery animate in few other cases as well.
You can try the below -
// 'bcolor' is animation keyframe name defined later
#uiAdminPanelMenu li a:hover {
-webkit-animation-name: bcolor;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: bcolor;
-moz-animation-duration: 1s;
-moz-animation-fill-mode: forwards;
animation-name: bcolor;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#-webkit-keyframes shadeOn {
from {background-color: #F4F4F4;}
to {background-color: #D3E1FA;}
}
#-moz-keyframes shadeOn {
from {background-color: #F4F4F4;}
to {background-color: #D3E1FA;}
}
#keyframes shadeOn {
from {background-color: #F4F4F4;}
to {background-color: #D3E1FA;}
}