I'm new on css animation and I'm interested to know more about #keyframe animations.
When we use #keyframe, do I need to load an external library file for that?.
I did not get the expected result when i put it alone without adding an external library?
No external library is required for keyframes to work.
Below is the example of creating a marquee effect using pure CSS. Check the code snippet, it uses keyframes.
.marquee-parent {
position: relative;
width: 100%;
overflow: hidden;
height: 30px;
}
.marquee-child {
display: block;
width: 147px;
/* width of your text div */
height: 30px;
/* height of your text div */
position: absolute;
animation: marquee 5s linear infinite;
/* change 5s value to your desired speed */
}
.marquee-child:hover {
animation-play-state: paused;
cursor: pointer;
}
#keyframes marquee {
0% {
left: 100%;
}
100% {
left: -147px
/* same as your text width */
}
}
<div class="marquee-parent">
<div class="marquee-child">
Hover on me to stop
</div>
</div>
.
Related
Please can you help troubleshoot the transition in this CSS? My browser can see the code in the inspector but no transition is taking place. I have tried operating the transition on different properties including width and position but nothing works.
#header-image {
position: absolute;
top: 30px;
right: 30px;
background: transparent;
width: 250px;
margin-left: 10px;
opacity: 1;
transition: opacity 2s linear 1s;
}
I know I'm probably being thick so apologies in advance.
In order for the transition to work.. the property value should change. only then it will trigger the transition.
i.e) lets say #header-image initially has opacity: 0; width: 50px;.
but when you hover it you want to increase the opacity and width opacity: 1; width: 250px;
so your css will look like..
#header-image {
position: absolute;
top: 30px;
left: 30px;
background: blue;
width: 100px;
height: 100px;
margin-left: 10px;
animation: fadeIn 2s linear;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="header-image"></div>
Then your transition will work. So basically transition will work only when there is a change in the value. But in your case you are setting the opacity:1 initially by default.
If you want to add this effect on page load then you have to use css animation or javascript. Below I have given an example snippet on how it can be achieved using css animation.
However if you are planning to use many animations then I recommend to use some popular libraries like Animista, Animate.css, wow.js
I am trying to create an animated hamburger menu. I found out about CSS animations and I decided to use that.
The setup of the menu is very easy: I have a background color and the two divs that make up the hamburger menu.
I have created a square div, and positioned that on the top right corner of my menu. My goal for now is that the background fades in when I click on this button. The button is now green, but that’s temporarily. I will animate the rest of the menu when I now how to start an animation on click.
I’ve already tried a lot to solve this, but it just doesn’t work. I hope you can help me!
The below code is the code I now have. I did not add the code that’s not so relevant to this question.
The menu should also close when I click the button again, so the animations should run reversed. How can I best do this?
Thanks! Ralph
index.html
</div>
<div class="dsgn-header">
<div class="dsgn-header-menu-opened">
<div class="dsgn-header-menu-opened-background"></div>
<div class="dsgn-header-menu-opened-menuitems"></div>
</div>
<div class="dsgn-header-logo">
<p class="dsgn-header-title">Site title</p>
</div>
<div class="dsgn-header-menu-mobile">
<div class="dsgn-header-rectangle-up"></div>
<div class="dsgn-header-rectangle-down"></div>
<div class="dsgn-header-button" onclick="ani()" ></div>
</div>
header.css
.dsgn-header {
width: 100vw;
height: 88px;
margin-left: 0px;
background-color: white;
}
/* Logo */
#media (max-width: 350px) {
.dsgn-header-logo {
position: absolute;
left: 16px;
top: 27px;
}
}
#media (min-width: 351px) {
.dsgn-header-logo {
position: absolute;
left: 28px;
top: 27px;
width: 75%;
max-width: 500px;
}
}
.dsgn-header-title {
color: #FF0000;
font-size: 28px;
font-family: 'Playfair Display', serif;
}
/* Menu animation */
.dsgn-header-rectangle-up {
position:absolute;
width:40px;
height:1px;
background:grey;
right:28px;
top:40px;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
animation-name: dsgn-header-rectangle-up;
animation-duration: 1s;
}
.dsgn-header-rectangle-down {
position:absolute;
width:40px;
height:1px;
background:grey;
right:28px;
top:54px;
-webkit-animation-name: dsgn-header-rectangle-down; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
animation-name: dsgn-header-rectangle-down;
animation-duration: 1s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Let op de ease in ease out en de animation iteration */
/* Menu opened */
.dsgn-header-menu-opened-background-active {
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
background-color: black;
-webkit-animation-name: menu-background; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
animation-name: menu-background;
animation-duration: 1s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes menu-background {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Standard syntax */
#keyframes menu-background {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.dsgn-header-menu-opened-menuitems {
position: absolute;
left: 45px;
top: 150px;
width: 75%;
background-color: grey;
}
.dsgn-header-button {
position: absolute;
top: 0px;
right: 0px;
width: 88px;
height: 88px;
background-color: green;
}
Javascript:
$('#dsgn-header-button').onClick(function(){
$('#dsgn-header-menu-opened-background').addClass('.dsgn-header-menu-opened-background-active');
});
If you really want to make this reversible animation, I suggest you to use transition instead of keyframes, since when you start the animation, there's no way to keep track the current state and the target state, so if you click the button while the animation is unfinished, it'll jump directly to the last frame and play reverse.
But still, here's the solution:
const demo = document.querySelector('.demo');
const button = document.querySelector('button');
let reverse = false;
button.addEventListener('click', onClickPlay);
function onClickPlay(){
// Save the animation state
let animation = demo.style.animation;
// Clear the animation
demo.style.animation = 'none';
// You need to call this at next draw call to make the animation take effects
setTimeout(()=>{
// Restore the animation
demo.style.animation = animation;
// Make the animation running
demo.style.animationPlayState = 'running';
// Set the animation direction by current state
demo.style.animationDirection = reverse ? 'reverse' : 'normal';
// Flip the state
reverse = !reverse;
button.innerText = reverse ? 'Reverse' : 'Forward';
}, 0);
}
#keyframes anim {
0% {
width: 0px;
background-color: red;
}
100% {
width: 100px;
background-color: blue;
}
}
.demo {
/* Make the animation paused at the beginning */
animation: anim 1s paused both;
width: 0px;
height: 20px;
}
<button>Forward</button>
<div class="demo"><div>
I am wondering if there is a way in full CSS to reproduce the following animation (the tool-tip box that appears and disappears) and appears again.
I wanted it to be recursive
http://bourbon.io/
You can do this using animations properties (with a custom animation).
Example:
HTML
<div id="container">
<div id="animatediv">
</div>
</div>
CSS
#container {
background-color: yellow;
display: inline-block;
padding: 40px;
}
#animatediv {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: hideshow;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes hideshow {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Here's a jsfiddle:
https://jsfiddle.net/fabio1983/j6jj9766/
You can also check this page for more informations:
https://www.w3schools.com/css/css3_animations.asp
So i've recently working on some private project, and since i am a huge CSS fan i want to do most of the animations in CSS rather than in JavaScript.
Today i wanted to create something like this:
Text moving from left to right
I think this might be possible with CSS Animations. In theory, I have a div wrapper with position:relative, a fixed width and overflow:hidden. Inside, there is a div with position:absolute and left:0 and bottom:0. Now in some cases, the text is too long for the parent div, and i wanted to let text text "float" though the parent div: actually animating the div from left:0 to right:0.
I stumbled upon some CSS Animations and tried this
#keyframes floatText{
from {
left: 0;
}
to {
right: 0;
}
}
on the child div. And of course this didn't worked. Animations like from left :0 to left: -100px work, but this doesn't ensure that the whole text is visible, when it is longer than those additional 100px. Is there a nice and clean way to make this work? Surely JavaScript might rock this desired functionality. But I'd wanted to know if there is a way to do this in pure CSS.
Thanks in advance!
EDIT:
To clearify what I have in my mind, i've created a gif displaying what i want to accomplish with CSS animations:
Animated
As you see, we have three of that kind next to each other, some have a name which fits directly, some others might be too long and should be animated forth and back, so the user can read it :)!
Thanks again!
EDIT2:
Is there a way to accomplish something like this?
#keyframes floatText{
from {
left: 0px;
}
to {
left: (-this.width+parent.width)px;
}
}
This would be the ultimate solution, I know that this kind of coding is not possible in CSS, but maybe with some CSS3 tweaks like calc() or something? I'm out of ideas now :(
You can stop when your text hits the right border
This solution uses CSS translate.
The trick is that translate's percentages are corresponding to the current element and left referrs to the parent.
Make sure your text's display property is NOT inline.
Downsides of this CSS only approach:
Shorter texts also get animated. To counter that consider JavaScript or make your text min-width: 100%;. This can lead to minimal wiggling by the animation.
All texts get the same amount of animation duration, which can be awful for long texts. Again, consider JavaScript (you'll want to look at scrollWidth) or make many animation classes, which can be very hard to manage.
.animated {
overflow: hidden;
width: 11rem;
white-space: nowrap;
}
.animated > * {
display: inline-block;
position: relative;
animation: 3s linear 0s infinite alternate move;
}
.animated > *.min {
min-width: 100%;
}
#keyframes move {
0%,
25% {
transform: translateX(0%);
left: 0%;
}
75%,
100% {
transform: translateX(-100%);
left: 100%;
}
}
/* Non-solution styles */
.container {
display: flex;
flex-wrap: wrap;
}
.animated {
font-size: 2rem;
font-family: sans-serif;
border: 0.1rem solid black;
margin: 1rem;
}
.animated > * {
box-sizing: border-box;
padding: .5rem 1rem;
}
<div class="container">
<div class="animated">
<span>Short</span>
</div>
<div class="animated">
<span class="min">Short</span>
</div>
<div class="animated">
<span>Some more text</span>
</div>
<div class="animated">
<span>A really long text to scroll through</span>
</div>
</div>
change your keyframe value in %
Try This
body{
overflow: hidden;
}
p{
position: absolute;
white-space: nowrap;
animation: floatText 5s infinite alternate ease-in-out;
}
#-webkit-keyframes floatText{
from {
left: 00%;
}
to {
/* left: auto; */
left: 100%;
}
}
<p>hello text</p>
hi dude i have tried this
Note : but you will find one thing is missing and will see that animation will not reach to the purely left and right i mean you can't
see the whole text of the div.
and that is due to the value of the left and right i have set to the -100 and 100 so because i couldn't find the alternative for that so
right now trying to see that how can you make this happen.
and here is my try
div.main_div{
margin:0;
padding:0;
width: 20%;
height: 60%;
background-color:grey;
position:absolute;
overflow: hidden;
}
div.transparent_div{
width:100%;
height:50px;
bottom:0;
background:red;
position:absolute;
}
div.text_wrapper{
height:50px;
bottom:0;
z-index:10;
background:transparent;
white-space: nowrap;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
color:white;
font-size:2em;
vertical-align: middle;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
position:absolute;
-webkit-animation: anim 1.5s infinite;
animation: anim 1.5s infinite;
animation-direction: alternate-reverse;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
}
#-webkit-keyframes anim {
from {
left: -100%;
}
to {
left:100%;
}
}
#keyframes anim {
from {
left: -100%;
}
to {
left:100%;
}
}
<body>
<div class="main_div">
<div class="text_wrapper">Hiii i am going right to left infinete times and here are the news
</div>
<div class="transparent_div"></div>
</div>
</body>
and here you can check out the demo of the above working code
DEMO CODE
Add ease-in-out to the animation for smoothness, and use % instead of px to move it left or right.
we can write jQuery code, for finding over-flow text and enable animation:
function AutoScrollText() {
var els = document.getElementsByClassName('container');
[].forEach.call(els, function myFunction(el) {
var isOverflowing = el.clientWidth < el.scrollWidth;
if (isOverflowing) {
$(el).children('span:first-child').addClass('animated');
}
var curOverf = el.style.overflow;
if (curOverf == "" || curOverf === "visible") {
$(el).css({ "overflow":"hidden"});
}
});
}
I'm trying to create a simple reusable CSS class so I can have this animation everywhere.
Everything works fine except that I can't find any example/documentation on how to trigger the reverse animation.
Here is my HTML:
<div class="cards">
<div class="card">
<div class="frontpage">
<img src="http://lorempixel.com/400/200/"/>
</div>
<div class="rearpage">
<img src="http://lorempixel.com/g/400/200/"/>
</div>
</div>
<div class="card">
<div class="frontpage">
<img src="http://lorempixel.com/400/200/"/>
</div>
<div class="rearpage">
<img src="http://lorempixel.com/g/400/200/"/>
</div>
</div>
</div>
My animation is a "card-flip"-like animation using a simple toggleClass in Javascript to trigger the animation:
$('.card').click(function(){
$(this).toggleClass('opened');
});
And here is my CSS:
.cards {
width: 800px;
margin: auto;
}
.card {
width: 200px;
height: 100px;
position: relative;
display: inline-block;
margin: 10px;
}
.card .frontpage, .card .rearpage {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
.card .rearpage {
width: 0%;
}
.card .frontpage img, .card .rearpage img {
width: 100%;
height: 100%;
}
/***** ANIMATIONS *****/
/* ANIMATION 1 */
.card .frontpage {
-webkit-animation-duration: 1s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
}
.card.opened .frontpage {
-webkit-animation-name: frontToRear;
}
#-webkit-keyframes frontToRear {
0% { width: 100%; }
50% { width: 0%; margin-left: 50%; }
100% { width: 0%; }
}
/* ANIMATION 2 */
.card .rearpage {
-webkit-animation-duration: 1s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
}
.card.opened .rearpage {
-webkit-animation-name: rearToFront;
}
#-webkit-keyframes rearToFront {
0% { width: 0%; }
50% { width: 0%; margin-left: 50%; }
100% { width: 100%; }
}
What is the smart way of doing this? I wish I could just put some trigger on my .rearcard to trigger the reversed animation but I can't find any way of doing this.
I know I could just write 2 other "reversed" animations and apply them but it seems so dumb that I can't try to do better.
I set up a jsfiddle to help you analyze and test out: http://jsfiddle.net/9yp3U/
Your approach with margin and width to fake a rotation is very interesting, but you can do this much more simply with rotateY
.cards {
width: 800px;
margin:auto;
-webkit-perspective:1000;
}
.card {
width: 200px;
height: 100px;
position: relative;
display: inline-block;
margin: 10px;
-webkit-transition: 1s ease-in;
-webkit-transform-style: preserve-3d;
-webkit-transform:translateZ(1px);
}
.card .frontpage, .card .rearpage, img {
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.card img {
width: 100%;
height: 100%;
}
.card .rearpage,
.card.opened {
-webkit-transform:rotateY(180deg);
}
Demo
As for the question you asked, you can play animations backwards by using the animation-direction:backwards property, though with CSS toggling animations is hard. Thus, I'd recommend you use a transition instead since it's only a change between two states.
And FYI just in case, CSS selector don't always have to be in the parent child format. In your case applying just .child will do the same. The parent child selector is only necessary when needing to a higher selector specificity than existing properties.
Oh, and also FYI, jQuery isn't needed for this. I included an (untested) javascript equivalent if you want. If this is the only place where you're using jQuery on your page I'd recommend not using it because loading the whole jQuery library takes some time and data.