I want to make a website that when you open it, the background fades into a different color.
Example:
/* Chrome, Safari, Opera */
#-webkit-keyframes {
from {
background: white;
}
to {
background: #F7F2E0;
}
}
/* Firefox */
#-moz-keyframes {
from {
background: white;
}
to {
background: #F7F2E0;
}
}
#keyframes {
from {
background: white;
}
to {
background: #F7F2E0;
}
}
But when I run the script, nothing happens.
You need to add a name to the animation and then add the animation properties to the desired element(s).
Example Here
#keyframes background {
from {
background:white;
}
to {
background:#000;
}
}
In the animation shorthand below, the value forwards is added for the animation-fill-mode property in order to end the animation at the last color.
body {
animation: background 4s forwards;
}
Vendor prefixes omitted for simplicity - see the example for the full CSS.
I'd suggest reading more about CSS animations at MDN.
You have to give a name to your keyframe and and then apply it to the body. See this example. For animations and browser support see here.
#keyframes fadeBackgroud{
from {
background:white;
} to {
background:#F7F2E0;
}
}
body {
animation:fadeBackgroud 5s infinite;
}
Related
I have a container that displays input fields based on list. The user changes data in the displayed fields and more or less input will appear. The issue is that the container instantly changes to the size required and it is jarring. I would like an animation to ease the change in size.
body{
background: lightblue;
}
.my-card{
align-self: center;
padding: 20px;
margin: 0 auto;
width: auto;
border-radius: 4px;
display: inline-block;
background-color: #F2F2F2;
color: black;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border: 1px solid rgba(0,0,0,0);
bottom: 1px;
-webkit-transform-origin:top;
-moz-animation: fadein 2000ms; /* Firefox */
-webkit-animation: fadein 2000ms; /* Safari and Chrome */
-o-animation: fadein 2000ms; /* Opera */
}
.user-data{
text-align: left;
font-size: 18px;
margin: 1px 5px 5px;
-webkit-transform-origin:top;
-moz-animation: fadein 2000ms; /* Firefox */
-webkit-animation: fadein 2000ms; /* Safari and Chrome */
-o-animation: fadein 2000ms; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
<div class="my-card">
<div class="user-data">
<div>header text</div>
<input type="text" />
</div>
</div>
The new user-data fades in nicely but the my-card makes the change with no animation. The my-card does animate on the first load.
Is there some event on the for my-card like hover for the change in size?
Note: The HTML of the snippet is not exact, as this is Blazor. The data is populated with a foreach and in the foreach there is logic to determine what gets displayed. A better idea of what the actual HTLM is is something like this:
<div class="my-card">
#foreach (var x in MyList)
{
#if (x.Show == 1)
{
<div class="user-data">
<div>#x.HeaderText</div>
<input type="text" #bind="#x.StringValue" />
</div>
}
}
</div>
CSS transitions need a property to animate, and you need to change that property. Since there isn't a height or opacity change in the rules, it can't animate. The nested components that actually change in response to the data collection changing come in and out of the DOM which is a change.
So, you have a couple of options:
Set a height to your container and change that with C# so that it travels to the DOM and do a CSS animation on it. This is going to be tough - you need to somehow calculate how tall you want your container.
Hide all the content for a bit, then await Task.Delay(20); to let it render, then show it again (a simple if-block) - that can let initial css animation do its work. The caveat is that you will do a lot of DOM changes, maybe lose data (so you maybe need to do some state management) and the screen will flicker badly.
Do animations with JS - when you alter the collection, get the current content height (the parent must have some height set and maybe hidden overflow, there are a few ways to setup the container so you can get the actual content size), and use JS to animate to the new height. That's the general way animations are done - with JS, when you need particular dimensions and settings.
Try toggling a class on the main wrapping element that will contain the desired animation (such as fade), something like the pseudocode below
<div class="my-card #AnimationClass">
. . .
</div>
#code{
string AnimationClass {get;set;} = string.Empty;
ObservableCollection<TItem> MyList {get;set;} = new ObservableCollection<TItem>();
void OnInitialized()
{
MyList.CollectionChanged += MyCollectionChangedHandler;
}
//I don't remember the exact syntax here, if it can't take a Task, use Task.Run in the body to do the async work
async Task MyCollectionChangedHandler(object sender, NotifyCollectionChangedEventArgs e)
{
AnimationClass = "my-anination-class";
await InvokeAsync(StateHasChanged);
await Task.Delay(500); // about the time of your animation
AnimationClass = "";
}
void Dispose()
{
MyList.CollectionChanged -= MyCollectionChangedHandler;
}
}
So I just saw this question where op defined an animation called flash. It causes weird behaviour in all browsers I tested (Chrome and Firefox - both recently updated):
The animation values I enter get ignored and instead the block fades in and out with a yellow color - kind of like a flash.
Here's a screenshot of what I'm seeing:
I couldn't find anything about predefined CSS animations and I can't seem to override them either.
Here's the code snippet:
.block {
height: 100px;
width: 100px;
background-color: red;
}
.flash {
animation: flash 2s infinite;
}
#keyframes flash {
0% {
background-color: blue;
}
50% {
background-color: red;
}
100% {
background-color: blue;
}
}
.notFlash {
animation: notFlash 2s infinite;
}
#keyframes notFlash {
0% {
background-color: blue;
}
50% {
background-color: red;
}
100% {
background-color: blue;
}
}
<div class='block flash'>Flash Animation Name</div>
<div class='block notFlash'>A Different Animation Name</div>
What is happening here? Does such a thing as preset animations exist?
I couldn't find anything googling.
StackOverflow uses an animation with that name in its own styles. As the StackSnipppet is not sandboxed, this style overrides the one you define in the snippet.
The following snippet shows the animation in use in the console output to indicate a new item has been logged to the console:
let i = 0
setInterval(() => {
console.log(++i)
}, 1000)
You can see that this is not the case if you try a different snippet tool or run your code locally.
See the post on meta for more information (linked by esqew in the comments).
I implemented a blinkingtext animation on my system to keep blinking red, but I want it only on the screen that I am putting the code and not at all.
Follow the code below.
/deep/ nb-layout-header nav {
animation:blinkingText 1s infinite;
}
#keyframes blinkingText {
0% {
background-color: #374355;
}
100%{
background-color: #D42333;
}
}
Please see:
http://codepen.io/richardstelmach/pen/RNwvyG
"svg" is the id of the in the html.
The CSS is:
#svg{
display:block;
max-height:400px;
margin:0 auto;
animation:filters 2s infinite;
}
#svg .colour1{
fill:#2bb0b7;
}
#svg .colour2{
fill:#ab3e41;
}
/* animate effects */
#keyframes filters {
0%{
filter:hue-rotate(0deg);
}
100% {
filter:hue-rotate(360deg);
}
}
The animation isn't working. I've tried changing it to specific -webkit- CSS and also tried applying it to the class ".colour1" instead but to no avail.
I also tried animating the fill instead of using the hue-rotate. But again, no luck.
Just add vendor prefix and its beautiful:
#keyframes filters {
0%{
-webkit-filter:hue-rotate(0deg);
}
100% {
-webkit-filter:hue-rotate(360deg);
}
}
You need to prefix your filters too:
DEMO
#-webkit-keyframes filters {
0%{
-webkit-filter:hue-rotate(0deg);
}
100% {
-webkit-filter:hue-rotate(360deg);
}
}
Basically needed to browser prefix everything. :
#svg{
display:block;
max-height:400px;
margin:0 auto;
-webkit-animation:filters 20s infinite;
}
#svg .colour1{
fill:#2bb0b7;
}
#svg .colour2{
fill:#ab3e41;
}
/* animate effects */
#-webkit-keyframes filters{
0%{
-webkit-filter:hue-rotate(0deg);
}
100% {
-webkit-filter:hue-rotate(360deg);
}
}
Finished code here: http://codepen.io/richardstelmach/pen/RNwvyG
Will need to add in other pre-fixes for other browsers.
I have a background image for a div.
I need the background to be a different colour other than white until the background image is loaded.
I can not use a background color on a container div, as my background image has transparency and I want to see page content underneath.
is there a way to have a background color which loads instantly, and then when the background image is loaded use that? I know I could do it with JS but is there any fallback method I can use with just css/ html?
You can simply stack the two CSS rules.
background-color: #000;
background-image: url("...");
The background color will display until the image is loaded.
If you are absolutely against Javascript for whatever reason, you can create an effect that mimics what you would obtain with Javascript.
http://jsfiddle.net/8Qk5K/5/
div {
background : url(http://www.st.hirosaki-u.ac.jp/~shimpei/GPS/GPSCMC/images/sphere-transparent.png);
width:500px;
height:500px;
position:relative;
}
.container:before{
width:500px;
height:500px;
position:absolute;
left:0;
top:0;
content:"";
background:#333;
-webkit-animation: fade-out 99999s 1 linear; /* Safari 4+ */
-moz-animation: fade-out 99999s 1 linear; /* Fx 5+ */
-o-animation: fade-out 99999s 1 linear; /* Opera 12+ */
animation: fade-out 99999s 1 linear; /* IE 10+ */
}
#-webkit-keyframes fade-out {
0% { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
#-moz-keyframes fade-out {
0% { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
#-o-keyframes fade-out {
0% { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes fade-out {
0% { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
What this does is:
add a block element above your image, with your desired background.
fade that background after little time (you have to find the right amount that works for your content).
keep the background faded with infinite time.
The down side of this as you probably noticed is that you can't predict the exact time. For some, the image would load, for others it may still have a little bit till it loaded.
You can also adjust do fade-out time, depending on browser. If someone access the website with IE8 for example, you can add a higher fade-out time.
Also, a delay can be added to the animation, to only start it after some time.