I have an animation using pure css - I have a div - containing a bunch of p tags - I want to drop a letter at a time - that works - but why dont I see the letter at the bottom?
I want to see each letter stay in the bottom of the page - I have tried to use bottom pixels but the result is the same.
Any ideas what I am missing?
<!doctype html>
<html>
<head>
</head>
<style>
#main
{
position: absolute;
width: 500px;
height: 500px;
}
#main > p
{
float:left;
position: relative;
}
.letter:nth-child(1) {
animation: bottom 5s 1s;
}
.letter:nth-child(2) {
animation: bottom 5s 2s;
}
.letter:nth-child(3) {
animation: bottom 5s 3s;
}
#keyframes bottom
{
0% {bottom: 100%;}
100%{bottom:0%;}
}
</style>
<body>
<div id="main">
<p class='letter'>A</p>
<p class='letter'>B</p>
<p class='letter'>C</p>
</div>
</body>
</html>
First of all you should make your letter or p tags be absolutley positioned. You will get better performance that way.
Second add forwards to your animation.
animation: bottom 5s 3s forwards;
That will make your letters stay at the end of animation.
Check out this pen: https://codepen.io/ivandoric/pen/VXgMNE
Related
SlideDown type of animations are very useful to show the user what is changing in the layout. I used to do this with JQuery, but I rather have a CSS only solution.
If the element is positioned absolute, everything is perfect with using transform: scale. But it is possible to do the same when the element is taking space and should move things around?
I don't mind that it grabs it's space in one big step - as long as the animation shows some kind of direction for the eye to follow.
There is the work around with max-height - like here: https://stackoverflow.com/a/8331169/647845
, but what I don't like is that I have to estimate the height, otherwise the animation looks clunky or you're missing content.
I'm perfectly fine for using transform: scale and having a jump in the other elements. In combination with display: block it does not work though. I'm looking for animating both up and down.
Is there a (simple) alternative?
In conclusion I'm looking for an alternative to animating the delay of display: none/block.
.lolcat
{
transition: transform 200ms ease-in-out;
transform: scale(1,0);
transform-origin: 0 0;
display: none;
}
.lolcat.expanded
{
transform: scale(1,1);
display: block; /* I wish you'd be delayable */
}
You can use margin-top property and animate menu.
See the Snippet below:
#lolcat-container{
overflow:hidden;
}
.lolcat
{
border:1px solid black;
background:red;
color:white;
margin-top:-100%;
animation-direction: reverse;
animation:1s 1 alternate forwards close;
}
#menu:hover .lolcat
{
animation:1s 1 alternate forwards open;
}
#keyframes open {
0% {
margin-top:-100%;
}
100% {
margin-top:0%;
}
}
#keyframes close {
0% {
margin-top:0%;
}
100% {
margin-top:-100%;
}
}
<div id="menu">
<a>hover me</a>
<div id="lolcat-container">
<ul class="lolcat">
<!-- Create a bunch, or not a bunch, of li's to see the timing. -->
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div>
Content
</div>
</div>
You can also test it here
I have a small div without text and when I hover over it, the text appears. When it appears I want a zoom animation to happen. The code I have is working fine on Chrome and Edge but on Firefox the zoom animation is not working, the first time the page loads.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#keyframes animatezoom{
0%{transform:scale(0);}
100%{transform:scale(1);}
}
.divClass{
background: lightblue;
height: 100px;
width: 100px;
}
.textClass{
display:none;
animation:animatezoom 0.6s;
}
.divClass:hover .textClass{
display:inline-block;
}
</style>
</head>
<body>
<div class="divClass">
<p class="textClass">Text</p>
</div>
</body>
</html>
I'm using Firefox Quantum 58.0.1
Here is a fiddle. (Make sure to click Run/Refresh after doing hover since the lack of animation only happens the first time the code runs)
You have to set animation on hover:
.textClass {
display: none;
}
.divClass:hover .textClass {
animation: animatezoom 0.6s;
display: inline-block;
}
I want to be able to have a side-bar slide in. I have almost gotten there but I am having issues with the main view snapping into place while the side bar slides in. I have created this Plunkr to demonstrate the problem I'm having. Notice how the body doesn't move with the side-panel. How can I make this work as I expect?
body:
<div class="container">
<div class="child">
<a href ui-sref="main.sidePanel">show side panel</a>
</div>
<div ui-view class="slide"></div>
</div>
side-panel:
<div class="side-panel-body">
<a href ui-sref="main">hide side panel</a>
</div>
css:
.container {
display: flex;
height: 400px;
padding: 20px 0;
}
.child {
background: yellow;
flex: auto;
}
.side-panel-body {
width: 400px;
height: 100px;
background: lightgray;
}
.slide.ng-enter,
.slide.ng-leave {
transition: all 2s ease;
}
.slide.ng-enter {
transform: translate(100%, 0);
}
.slide.ng-enter-active {
transform: translate(0, 0);
}
.slide.ng-leave {
transform: translate(0, 0);
}
.slide.ng-leave-active {
transform: translate(100%, 0);
}
Without going into too much detail about transformations. The easy answer is that translating a DOM element has no effect on other DOM elements.
So you have a flexbox with 2 divs in it. They're functioning as expected. When you expand the window, the left div expands to fill, as it's set to flex: auto, while the right div stays at 400px of fixed width.
When you transform: translate the righthand div, all you are doing is visually moving it. It's container, as well as the lefthand div, still consider it to be exactly where it started. That is, until you actually hide it or remove it. When the right hand div is hidden, then you can see the lefthand div fill up the flex-box.
So to achieve what you want, you'd need to either animate both divs, lefthand for size, and righthand for translation. Or actually change the width of the righthand div, allowing the transition: all 2s ease;to handle the animation for you.
Thanks to #CH Buckingham I came up with a solution. It's not exactly how I imagined, but it works just fine and really isn't THAT hacky. This allows you to toggle the sidebar with a scope variable but you can have the flexibility of content with ui-router.
<div class="container">
<div class="child">
<a href ui-sref="main.sidePanel">show side panel</a>
</div>
<div ng-show="showSidebar" class="sidebar">
<div ui-view class="uiview"></div>
</div>
</div>
css (less):
.container {
display: flex;
}
.child {
flex: auto;
}
.sidebar {
width: 1000px; // for some reason this acts more like a max-width for the sidebar. The actually width matches the size of the ui-view.
&.ng-hide-add, &.ng-hide-remove {
transition: all ease .8s;
overflow-x: hidden;
}
&.ng-hide {
width: 0;
}
}
I've been trying to alter this example of CSS3 animated circles (original by Rishabh) so that the arrow in the centre does not rotate. However, the only way I can get it be still is to remove the animation effect from the three circles (#outer-circle, #inner-circle, #centre-circle), but this gets rid of the cool spinning effect.
The circles are positioned within each other, and are rotating with the CSS below (the link to cssdeck.com is clearer)
-webkit-animation:turning_cw 5s infinite;
-moz-animation:turning_cw 5s infinite;
animation:turning_cw 5s infinite;
Does anyone know a way of getting the arrow in the centre to stay still?
one method would be to break the nesting apart and stack the elements, and then position them accordingly.
I positioned each of the items as needed within the position:absolute; settings adn then broke out the divs from the nesting:
HTML
<div id="container">
<div id="main">
<div id="outer-circle"></div>
<div id="inner-circle"></div>
<div id="center-circle"></div>
<div id="content">
↓
</div>
</div>
RELEVANT CSS:
#content {
position:absolute;
top: 220px;
left: 350px;
}
#center-circle {
position:absolute;
top:190px;
left: 320px;
}
#inner-circle {
position:absolute;
left: 300px;
top: 170px;
}
DEMO
I want to create an animated HTML "marquee" that scrolls back and forth on a website:
<div class="marquee">This is a marquee!</div>
and the CSS:
.marquee {
position: absolute;
white-space: nowrap;
-webkit-animation: rightThenLeft 4s linear;
}
#-webkit-keyframes rightThenLeft {
0% {left: 0%;}
50% {left: 100%;}
100% {left: 0%;}
}
The problem is, the marquee doesn't stop when it reaches the right-hand edge of the screen; it moves all the way off the screen (making a horizontal scroll bar appear, briefly) and then comes back.
So, how do I make the marquee stop when its right-hand edge reaches the right-hand edge of the screen?
EDIT: Oddly, this does not work:
50% {right: 0%}
Somehow I got it to work by using margin-right, and setting it to move from right to left.
http://jsfiddle.net/gXdMc/
Don't know why for this case, margin-right 100% doesn't go off the screen. :D
(tested on chrome 18)
EDIT: now left to right works too http://jsfiddle.net/6LhvL/
You could simply use CSS animated text generator. There are pre-created templates already
Hi you can achieve your result with use of <marquee behavior="alternate"></marquee>
HTML
<div class="wrapper">
<marquee behavior="alternate"><span class="marquee">This is a marquee!</span></marquee>
</div>
CSS
.wrapper{
max-width: 400px;
background: green;
height: 40px;
text-align: right;
}
.marquee {
background: red;
white-space: nowrap;
-webkit-animation: rightThenLeft 4s linear;
}
see the demo:- http://jsfiddle.net/gXdMc/6/
I like using the following to prevent things being outside my div elements. It helps with CSS rollovers too.
.marquee{
overflow:hidden;
}
this will hide anything that moves/is outside of the div which will prevent the browser expanding and causing a scroll bar to appear.
If I understand you question correctly, you could create a wrapper around your marquee and then assign a width (or max-width) to the wrapping element. For example:
<div id="marquee-wrapper">
<div class="marquee">This is a marquee!</div>
</div>
And then #marquee-wrapper { width: x }.
I am not sure if this is the correct solution but I have achieved this
by redefining .marquee class just after animation CSS.
Check below:
<style>
#marquee-wrapper{
width:700px;
display:block;
border:1px solid red;
}
div.marquee{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
}
#-moz-keyframes myfirst /* Firefox */{
0% {background:red; left:0px; top:0px;}
100% {background:red; left:100%; top:0px}
}
div.marquee{
left:700px; top:0px
}
</style>
<!-- HTMl COde -->
<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<div id="marquee-wrapper">
<div class="marquee"></div>