I'm trying to fade in a textbox via CSS keyframes:
.otherAnim{
animation-delay:11s;
animation-duration:2s;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes Appear{
from {opacity:0;}
to {opacity:1;}
}
<div class="col" style="width:30%;height:100%">
<h2>some text</h2>
<h2 class="otherAnim" style="animation-name:Appear;opacity:0;">some text: </h2>
<input type="text" id=myInput class="otherAnim inputSoFar" style="animation-name:Appear;float:left;height:45px;opacity:0;">
</div>
This works on JSFiddle, but not in my local view of the page (Chrome 57). The weird thing for me is that if I inspect the element, the otherAnim class has dissapeared. This doesn't happen in JSFiddle. I'm using w3.css, but it still works if I load it as a external resource in JSFiddle.
What am I possibly missing ?
Don't put the animation-name property in inline style. You have to put it in the style tag or a linked css file.
Related
I'm trying to do my own notification compoment in my sample Angular application.
I have the following template:
<aside *ngFor="let message of messages ">
<div class="notification" style="position:fixed">
{{message.content}}
</div>
</aside>
I push new messages through service to the component, so when new message comes it is immidiately showed in above loop.
I would like to make every message visible for 3 seconds.
I need to add a class with fade out transition which is set to 3 seconds.
Use a keyframes structure.
#keyframes fadeout {
from {opacity:1;}
to {opacity:0;}
}
.notification {
animation: fadeout 3s
}
I am trying to use the tada animation from font awesome with a custom font I generated from fontastic. I have added the font-awesome-animation.min.css to the header of my WordPress theme file. I have also added this html code to my site (see the membership icon).
<a class="faa-parent animated-hover" href="#">
<div class="service-icon-container">
<div class="fa icon icon-membership faa-tada"></div>
</div>
<h3>Membership</h3>
<p>Membership info text</p>
</a>
Any suggestions on making it work?
You forgot to change the reference of hover class in css.
for your membership icon try adding following code:
a.faa-parent:hover .service-icon-container > .fa.icon {
-webkit-animation: tada 2s linear infinite;
animation: tada 2s linear infinite;}
for all other icons, add anchor tag as you added for membership.
I am using animate.css for a login form. It works except not the way I want it to work. Currently I am using fadeInDown but it fades in down from a longer distance that I want. It fades in from off the viewport versus just fading in about 20px. I hope that makes sense.
https://daneden.github.io/animate.css/
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<div id="login">
<div class="row animated fadeInDown">
<img src="logo.png"/>
<input type="text">
<input type="password">
</div>
</div>
Just overwrite the default fadeInDown animation to what ever you like.
If you take a look at the source on GitHub - animate.css/source/fading_entrances/fadeInDown.css you'll see that it is just a simple #keyframes rule. Just copy that and change the transform property to your needs.
In your case like so:
transform: translate3d(0, -20px, 0);
Here is an example changing the fadeInDown animation to appear from left to right instead of going from top to bottom, which makes no sense at all, but just to show you that it can be changed.
You could as well do a custom build and add your own animations or a helper class to change the offset.
#import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css');
#keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
<div id="login">
<div class="row animated fadeInDown">
<input type="text">
<input type="password">
</div>
</div>
I need to have scrolling images controlled by two arrows (scroll up and scroll down). I have a CSS "scrollUp" animation written as well as a "scrollDown" animation. How can I have these animations occur to the images when the arrows are clicked?
I think I need to have a "scrollUp" class and a "scrollDown" class applied to the images. but I am not sure how to make one arrow activate the "scrollUp" class animation and another activate the "scrollDown" animation.
I've seen people use links with href="#something" to activate an ID animation, but my images can't have multiple ID's so that will not work.
Any help would be greatly appreciated! If you know of any video tutorials that would be great too! I'm not opposed to using JavaScript but I'd prefer to use CSS.
EDIT: I basically need the following code to activate one image at a time, whenever a button is clicked:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web browsers</title>
<style type="text/css">
body {
margin-left: 100px;
margin-top: 100px;
}
#header {
height: 256px;
width: 256px;
overflow: hidden;
border:1px solid gray;
}
.slider {
animation: myanimation 8s ease-in-out infinite alternate;
}
#keyframes myanimation
{
0% {transform:translateY(0px); }
25% {transform:translateY(-256px); }
50% {transform:translateY(-512px);}
75% {transform:translateY(-768px);}
100% {transform:translateY(-1024px);}
}
</style>
</head>
<body>
<div id="header">
<img class="slider" src="img1.png" width="256" height="256">
<img class="slider" src="img2.png" width="256" height="256">
<img class="slider" src="img3.png" width="256" height="256">
<img class="slider" src="img4.png" width="256" height="256" >
<img class="slider" src="img5.png" width="256" height="256">
</div>
</body>
</html>
It wouldn't be the best solution syntactically, but you could wrap the image scroller inside of an <input type="checkbox" id="scroll-up-control"> tag, then select against #scroll-up-control:checked to apply styles for scrolling up, with the default listed above for scrolling down.
I would use some simple javascript to just apply a class to the container with whether to scroll up or down though.
I was able to resolve this issue by changing the method I used to actually scroll the images. I decided to instead use an iFrame with a hidden scrollbar. Javascript allowed buttons to control the iFrame's scrolling. Thanks to all that helped out!
Having html code with several hash links (e.g.href="#login") and css using pseudo selector :target for animation, such as
#login:target ~ #wrapper #console {
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-name: scaleOut;
-moz-animation-name: scaleOut;
-o-animation-name: scaleOut;
-ms-animation-name: scaleOut;
animation-name: scaleOut;
}
I would like to add a feature of conditional behavior, based on "source" of the trigger event.
Let's say the html code with
<a class="hidden" id="login"></a>
<div id="wrapper">
<div id="console" class="animate">
...
has somewhere also two links
<a id="link_1" href="#login">
and
<a id="link_2" href="#login">
both pointing to #login. Is it possible to modify css to have different behavior for each of links? In my case, is it possible by pure html and css to do different kinds of animation for both links?
No. :target is the only CSS selector of its type; for any other “behaviour”, you need JavaScript or something server-side.
The closest you can get is #login1 and #login2.
This isn't possible, as you ask it, since CSS has no capacity to conditionally-assess the source of the activity, and is only able to 'react' to the end-result, without the ability to reference the source of the action that 'caused' the :target selector to match.
That said, if you're able to change your HTML, and one of the links, you could approximate it:
<a id="link_1" href="#hidden">Link One</a>
<a id="link_2" href="#login">Link Two</a>
<div id="hidden"></div>
<a class="hidden" id="login"></a>
<div id="wrapper">
<div id="console" class="animate">
</div>
You can target differently:
#hidden:target + #login {
/* style, or trigger animation */
}
#login:target {
/* style, or trigger different animation */
}
The problem, of course, is that this clearly doesn't directly cause the :target selector to match the relevant element in both cases, so the answer must remain, basically: 'no,' this is a case in which JavaScript is probably the only real solution to meet your needs.