At the top of my page, I want to have some text scroll from left to right, as an announcement. I've heard about CSS animations before, but I don't know how to make one. So far, this is what I have.
p {
position: relative;
animation-name: example;
animation-duration: 13s;
animation-iteration-count: infinite;
}
#keyframes example {
0% {left:-200px; top:0px;}
50% {left:700px; top:0px;}
}
<p>This is an announcement</p>
I am wondering if there is an easier way to make the scrolling animation. I don't know JavaScript, but is there a way to make this animation in JavaScript or just in CSS?
You can use translateX with the transform property.
p {
animation: example linear 5s infinite;
}
#keyframes example {
from {
transform: translateX(-40%);
}
to {
transform: translateX(100%);
}
}
<p>This is an announcement</p>
So currently, your animation kind of restarts every 13 seconds and pauses and then starts over again. In your animation, the text movement is not consistent, it starts to move fast and when it ends, it gets slower.
A solution is to use the <marquee> tag. This tag is especially made for scrolling text!
For example, this code will automatically do whatever your code does, but better and less lines of code:
<!DOCTYPE html>
<html>
<body>
<marquee direction="right" >This is a paragraph.</marquee>
</body>
</html>
There are also a lot of attributes that you can change, including the direction, speed, height, loop, width, etc. You can change these attributes to your liking to make the scrolling text better.
Related
A few years back we added a note to our web page for users who are blocking JS. I would really like the note to stay hidden for folks who have JS on. The note's visibility relies on the body having a class body class="noJS". In order to remove that as swiftly as possible I have a JS as the very first item in the body tag that does not rely on anything but fires right away.
<!-- BODY element exists! -->
<script type="text/javascript">
/*<![CDATA[*/
document.body.className = document.body.className.replace(new RegExp(\'(?:^|\\s)\'+ \'no-js\' + \'(?:\\s|$)\'), \' \');
/*]]>*/
</script>
In Firefox I still see the note as a red flickering, for example on the top of the main page here https://www.colorperfect.com
Annoying, which leads to my question can I use CSS3 animations to fade in that note say after a one second delay? That should fix it I guess but I have never done anything with CSS animations so I figured I'd ask rather than fiddle... If that does not work other ideas would be welcome, too.
Edit:
This is the CSS that produces the red block. A simple matter of exchaning background and height.
body.noJS .single_navi_zeile
{
background-color:#BB0000;
height:12.7em;
background-position: left 0.5em bottom 0.3em;
background-repeat: no-repeat;
background-image: url("../grafik/nojs.png");
}
This should provide you the fade in effect you are after. Animation delays postpone when an animation starts and so you might end up with the element appearing, then vanishing suddenly only to fade back in again.
If you begin the animation right away but start from opacity: 0 and then after 1s (50% of a 2s duration) fade it back in you should get what you're after.
#keyframes fade-in {
0% {opacity: 0}
50% {opacity: 0}
100% {opacity: 1}
}
.anim-fade-in {
animation-name: fade-in;
animation-duration: 2s;
}
<p class="anim-fade-in">Some content</p>
Worth noting that the element is only hidden using opacity by this approach and so you may find that the page content moves as the element itself is present before being removed. You could experiment with sliding the element in instead.
did you try css for that?
.redBanner {
display: none;
}
body.no-js .redBanner {
display: block;
}
or with your example
body.no-js .single_navi_zeile {
background-color:#BB0000;
height:12.7em;
background-position: left 0.5em bottom 0.3em;
background-repeat: no-repeat;
background-image: url("../grafik/nojs.png");
}
So I have got a list of <div> elements.
I use JavaScript to change the contents of this list by inserting or removing elements according to filters, put in by users.
When inserting/creating a new <div> element, I use #keyframe animations to change the opacity from zero to one and give a little fade in from the left.
#keyframes fade-in-left {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
Everything is working perfectly fine but there is one crucial design problem:
What I want now, is a scale up animation. I can easily do that but the problem is that when inserting a new element, the elements in the list after it snap to the position at which they would be when the inserted <div> has completed scaling to 1.
The problem here is obviously the following: Changing the scale of a transform does not affect the positioning of the other elements. I would have to change the height. But I cannot do that, there is padding, margin etc.
So can anyone please tell me a solution to this problem? Thank you.
I'm actually expecting the answer to this to be a simple and straight "NO", but I have to ask, maybe someone even already did a dirty workaround.
I made a character using CSS3 only and added an animation that slowly shakes his head. This can be seen as the idle animation. Now I added a specific talk animation (actually seperate, it's aplied to a different <div>) where he holds still and one where he shakes his head strongly. I apply the class .shakehead to the wrapper element via JavaScript at certain events.
#keyframes head-swing {
0% {
transform: rotate(-2deg);
}
50% {
transform: rotate(2deg);
}
100% {
transform: rotate(-2deg);
}
}
.head {
animation: head-swing 7s infinite ease-in-out;
}
.shake .head {
animation: head-swing 1s infinite ease-in-out;
}
Now, when I simply suddenly apply the class to the wrapper, the probability of changing in the middle of the animation and creating an ugly break is pretty high, so the best thing to do would be crossfading both animations. I want to avoid to wait for the animation end via JS, because seven seconds is a little much to wait for.
(my usecase)
If you don't know what I mean, watch this Unity3D tutorial for a minute.
Is such a crossfade in any way possible? (Probably NO)
A crossfade is possible with the opacity poperty. You can use multiple poperties in the same keyframe animation (and I'm pretty surprised that a lot of people don't know that), so don't be afraid to write height changes with of you opacity changes!.
You should also put your "moving mouth" into the same div than you first, at the exact same position and do your crossfade a bit like this.
#keyframes crossfade1 { /*applied on the "first" mouth (still)*/
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes crossfade2 { /*applied on the "second" mouth (moving) [the height is an exemple]*/
0% {
opacity: 0;
height: 3px /*the mouth is closed*/
}
50% {
opacity: 1;
height: 20px /*the mouth is open*/
}
100% {
opacity: 0;
height: 20px /*the mouth is closed*/
}
}
Put the duration as the same for the two keyframe animation and voilà! You have your perfect crossfade without even using javascript!
What do you think?
The idea is to have a responsive version of this fiddle(see below) that is 100% wide and has a height of 500px... If I adjust the width of this to 100% it messes up along the end of the animation.. How should I go about making a simple animation like this that will work cross browser, have a width of 100%, be displayed seamlessly, and a switchable height via media queries(I can do the queries part)..
my code: http://jsfiddle.net/hkJsm/
html
<div id="logo"></div>
css
#-webkit-keyframes slide {
from{
background-position:575px;
}
to{
background-position:1725px;
}
}
#logo{
text-align:center;
width:575px;
height:200px;
background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
-webkit-animation: slide 10s linear infinite;
}
Thanks for all the help
Your problem is interesting, so I realized the image had to be cropped because in CSS3 you can't manually flip images, so I've edited it. It is working in this fiddle, and was fixed by editing this image to this, and changing the background-position property a bit on to in the animation:
background-position:1725px;
to
background-position:1645px;
The image conversions are shown below.
This image
To this
Here's what you can do:
Fiddle: http://jsfiddle.net/hkJsm/1/
CSS
.outer{
background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
-webkit-animation: slide 10s linear infinite;
}
#logo{
min-height: 80px;
}
HTML
<div class="outer"><div id="logo"> </div></div>
I discovered the "http://thegoodman.cc/". It's an absolutely amazing website.
I am just really really curious, as to how the body of this document is slightly faded in, and slide up in this page:
http://thegoodman.cc/about/
It's done using CSS animations. When looking at the source, you'll find this line of code:
.sup {
animation:sup 1.8s backwards;
}
#keyframes sup {
0% {
opacity:0;
transform:translateY(50px);
}
30% {
opacity:0;
}
100% {
opacity:1;
transform:translateY(0);
}
}
It'll fade in the text (using opacity) and move it up using translateY .
JSFiddle example.
Take note it's using the Prefix Free JS library to prevent having to add prefixes like -webkit-, -moz- etc.