I'd like to add a menu button in the top right corner of my site - just a simple circle with an icon. I'd like to to load at a certain height and width and then automatically shrink, a few moments later, to another height and width - all without any user interaction.
Is this possible?
Any CSS gurus out there?
Many thanks,
You can do it with the CSS3 Animation:
div {
width: 50px;
height: 50px;
background: #00f;
border-radius: 50%;
animation-name: shrink; /* "calling" the animation */
animation-duration: 1s; /* adjust */
animation-timing-function: linear; /* specifies the speed curve of an animation / also try other values */
animation-delay: 3s; /* adjust */
animation-fill-mode: forwards; /* retains in the state set by the last keyframe */
}
#keyframes shrink { /* let's call it "shrink" */
0% {width: 50px; height: 50px}
100% {width: 25px; height: 25px} /* final state */
}
<div><div>
Experiment and adjust to your needs.
Note: There are also other animation properties & values so you might take a closer look to see what you can do.
Related
Hi im working on a CSS only animation and I need to make a block appear on a card here the 0% and 100% animation transition that activates herself with :hover
0%
100%
My need is to make the animation stay on the screen as long as my mouse is on element
TYsm
Truing using this code
div {
width: 100px;
height: 100px;
}
div:hover{
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
from {width: 0%; height:0%}
to {width: 100%; height: 100%}
}
I'm trying to do some simple animations for a mobile design. I want to slide in some elements from outside the screen. It works when the elements come from the left, but not when they come from the right, because the browser expands.
Can someone come up with a simple solution?
(view the page in Iphone size window)
http://e-daktik.dk/notesbogfull.html
my animations look like this:
.jaeger {
animation-duration: 3s;
animation-name: slidein1;
animation-delay: 1.0s;
animation-fill-mode: backwards;
}
#keyframes slidein1 {
from {
margin-left: 100%;
width: 100%;
opacity: 0;
}
to {
margin-left: 0%;
width: 100%;
opacity: 1;
}
}
ty.
Set an overflow-x: hidden; to the parent container and give it 100% width. This should hide the element as is slides in from the right.
Can I animate width from 0px to initial? Or it has to be absolute value?
span {
background: red;
animation: scroolDown 1s linear;
display: inline-block;
}
#keyframes scroolDown {
from {
width: 0px;
}
to {
width: initial;
//width: 130px;//works
}
}
<span>asdfdsafsafdsafdsaf</span>
Why does this happen?
When you set width to initial, you're really setting the width to auto (which is the initial value of the width property).
This issue dates as far back as 2007, when this bug was reported on WebKit. You can follow the conversation on that report and see:
The CSS WG has resolved that transitions don't run to/from auto values.
This is the behavior for all of the major browsers, so when trying to animate width to auto, we're out of luck and we have to go with an existing workaround.
The Workarounds
There's a few workarounds for animating to auto, but animating max-width is by far the most popular as it was already referenced by the two answers before this.
Rather than listing and explaining the workarounds in this post, I suggest you see this awesome article on the workarounds for this problem.
Summarizing the article, the workarounds are:
Animating max-height with explicit values
Animate transform with scaleX
Use JavaScript to achieve the desired effect
Use Flexbox
If you really need the functionality of animating to auto, your best bet is animating with JavaScript.
You can animate the max-width rather that the width; if you set the end width to something you know is at least as great as the desired end width, it will stop growing automatically at its natural width!
In this example, I set the end width at 20em, about twice the natural size, and I also increased the animation time, so that the time is about the same as the originally intended one.
span {
background: red;
animation: scroolDown 2s linear; /* about twice the expected time */
display: inline-block;
}
#keyframes scroolDown {
from {
max-width: 0px;
}
to {
max-width: 20em; /* about twice the expected size */
}
}
<span>asdfdsafsafdsafdsaf</span>
The concept for this kind of solution comes from How can I transition height: 0; to height: auto; using CSS?, so maybe I should have closed as a duplicate instead. Sorry.
Is this what you're trying to achieve?
The text gets unrevealed as the animation occurs with the background instead of text appearing and the background animating with a delay.
.inner {
display: inline-block;
height:20px;
background: #c3c;
overflow: hidden;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
animation: mymove 3s linear;
}
#keyframes mymove {
0% {
max-width: 0px;
}
100% {
max-width: 100%;
}
}
<span class="inner">
This is a test text for testing the text appearance for this test.
</span>
I am looking for way to make addition assignment in #keyframe.
for example I want background position change infinity and just go on.
.waterwave{
background-image: url("../img/waterwave.png");
height: 215px;
margin-top: -78px;
width: 100%;
animation-name: example;
animation-duration: 100s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: normal;
}
#keyframes example {
to {background-position: 100px;}
}
But I don't want to make absolute value like 100px .
I want something like backgroundPosition: "+=100" in js animation.
Is there any possibility to doing sth like that in css ?
If you have a repeating background, the position starts over at the width of the background graphic. For example, if the graphic is 300px wide, then background-position:50px looks exactly the same as background-position:350px.
So that's what you can use: move the background animation precisely the same width as the graphic, and then it will seamlessly start over. At least if you use the linear function rather than ease-in-out.
.waterwave {
background-image: url("http://lorempixel.com/300/215"); /* a 300px wide image */
height: 215px;
margin-top: -78px;
width: 100%;
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear; /* changed from ease-in-out */
animation-iteration-count: infinite;
animation-direction: normal;
}
#keyframes example {
to {
background-position: 300px; /* this should be the same as the image */
}
}
<div class="waterwave"></div>
(in the example I used 5 seconds for the duration, to make the effect visible, but you get the idea.)
If I have two lines of text one on top of the other. Content of each line is dynamic.
Is there a way to set animation speed in pixels per second? So that line would scroll with same speed regardless of their length?
Example of the situation:
div {
width: 50%;
padding-left: 10%;
float: left;
height: 50px;
overflow: hidden;
position: relative;
}
#line1 {
background-color: green;
}
#line2 {
background-color: yellow;
}
h4 {
position: absolute;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
/* Apply animation to this element */
/* Animation delay 0.5s */
-moz-animation: line-scroll 15s linear 0.5s infinite;
-webkit-animation: line-scroll 15s linear 0.5s infinite;
animation: line-scroll 15s linear 0.5s infinite;
}
#line1 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 200%;
}
#line2 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 600%;
}
#keyframes line-scroll {
0% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-100%);
/* Firefox bug fix */
-webkit-transform: translateX(-100%);
/* Firefox bug fix */
transform: translateX(-100%);
}
}
<div id="line1">
<h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4>
</div>
<div id="line2">
<h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4>
</div>
Means of AngularJS directive and CSS are welcome.
You can use JQuery (javascript) to get the width of headings and than calculate the duration based on the width i.e duration per pixel
width() method of jquery is used to get width of the headings.
I calculate the the duration as follows:
1s = 20px
Therefore 100px = 100/20
= 5s
You can increase the denominator (see the number10) in var dur1=Math.ceil(w1/10) to speed up the scrolling.
Here is the code
//getting the width of both the headings
var w1=$("#line1>h4").width();
var w2=$("#line2>h4").width();
//calculating the duration of the animation dynamically based on the width
var dur1=Math.ceil(w1/10);
var dur2=Math.ceil(w2/10);
//setting the duration dynamically
$("#line1>h4").css("animation-duration",dur1+"s");
$("#line2>h4").css("animation-duration",dur2+"s");
div {
width: 50%;
padding-left: 10%;
float: left;
height: 50px;
overflow: hidden;
position: relative;
}
#line1 {
background-color: green;
}
#line2 {
background-color: yellow;
}
h4 {
position: absolute;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
/* Apply animation to this element */
/* Animation delay 0.5s */
-moz-animation: line-scroll 15s linear 0.5s infinite;
-webkit-animation: line-scroll 15s linear 0.5s infinite;
animation: line-scroll 15s linear 0.5s infinite;
}
#line1 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 200%;
}
#line2 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 600%;
}
#keyframes line-scroll {
0% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-100%);
/* Firefox bug fix */
-webkit-transform: translateX(-100%);
/* Firefox bug fix */
transform: translateX(-100%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="line1">
<h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4>
</div>
<div id="line2">
<h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4>
</div>
In CSS you must provide the animation duration in time units, which is currently seconds / miliseconds.
You could, however, adapt the width of the transition by switching from a %-value to px-values like shown below:
div {
width: 50%;
padding-left: 10%;
float: left;
height: 50px;
overflow: hidden;
position: relative;
}
#line1 {
background-color: green;
}
#line2 {
background-color: yellow;
}
h4 {
position: absolute;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
/* Apply animation to this element */
/* Animation delay 0.5s */
-moz-animation: line-scroll 15s linear 0.5s infinite;
-webkit-animation: line-scroll 15s linear 0.5s infinite;
animation: line-scroll 15s linear 0.5s infinite;
}
#line1 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 200%;
}
#line2 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 600%;
}
#keyframes line-scroll {
0% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-1000px);
/* Firefox bug fix */
-webkit-transform: translateX(-1000px);
/* Firefox bug fix */
transform: translateX(-1000px);
}
}
<div id="line1">
<h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4>
</div>
<div id="line2">
<h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4>
</div>