I am running the following code and once the animation completes the opacity of the image changes. Till animation is going on the image looks smooth after that it changes the opacity.
please find code at following JS: https://jsfiddle.net/7fk0b788/
<!DOCTYPE html>
<html lang ="en">
<head>
<title> joe's Pizza Co.-New York's Best Pizza</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>
Joe's Pizza
</h1>
</header>
<div>
<section id="feature">
</section>
<section id="home-text">
</section>
<section id="offers">
</section>
</div>
<footer>
</footer>
</div>
</body>
</html>
#container
{
background: url("Img/background.jpg") no-repeat center center fixed;
background-size:cover;
min-width: 100%;
min-height: 100%;
position: fixed;
top:0;
left:0;
animation: fadein 4s;
filter: opacity(50%);
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:.5;
}
}
There are a few ways you can do it:
Add forwards to the animation property as that will make sure the animation once it hits its 100%, it will persist:
animation: fadein 4s forwards;
or by adding
opacity:.5;
Using forwards
Using opacity
Change the opacity .5 to 1. It'll go smooth till the end. Your code snippet below
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Related
I am trying to recreate Tom Riddle's text animation from Harry Potter chambers of secrets (as seen on here). I currently am still trying to use css in simulating it as can be done on Adobe Ae (as seen on here). Currently, what I have done is using keyframes to simulate the fade in a loop. I have no idea on how to move forward in this process. Here is my current code:
body{
background-color: bisque;
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
font-size: 100px;
}
.center {
position: absolute;
width: 550px;
height: 250px;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -150px;
}
.tr-fade{
opacity: 0;
transition: opacity 1s ease;
animation-duration: 6s;
animation-name: tr-fade-animation;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: forward;
}
#keyframes tr-fade-animation {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="text-container">
<div class="center tr-fade">
Hi, This is Tom Riddle.
</div>
</div>
</body>
</html>
I have researched about fractal noises in css, however none seemed to use image masking for text transition effects. What approach should I use in order to get the desired effect (SVG animation maybe)? Any help on this?
When my animation ends, my bottom_row element should disappear (as display: none is set at 100%), but it does not happen. Why?
.bottom_row {
opacity: 1;
animation: hide 5s linear 0s 1 normal forwards running;
}
#keyframes hide {
0% {
opacity: 1;
}
95% {
opacity: 0.05;
}
100% {
opacity: 0;
display: none;
color: red;
font-size: 48px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<nav class="header_nav_container">
<div class="top_row">
TOP ROW CONTENT
</div>
<div class="bottom_row">
BOTTOM ROW CONTENT
</div>
<div class="third_row">
THIRD ROW CONTENT
</div>
</nav>
</header>
</body>
</html>
If I simply set display: none; right away, the cell is not present in the layout (which is what I want at the end of my anim):
.bottom_row {
opacity: 1;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<nav class="header_nav_container">
<div class="top_row">
TOP ROW CONTENT
</div>
<div class="bottom_row">
BOTTOM ROW CONTENT
</div>
<div class="third_row">
THIRD ROW CONTENT
</div>
</nav>
</header>
</body>
</html>
How do I make an element disappear from the layout / grid without js? Is it possible and why it does not work with animations?
You can use height: 0;overflow:hidden; instead and you will get the same visual result:
.bottom_row {
opacity: 1;
animation: hide 5s linear forwards ;
}
#keyframes hide {
0% {
opacity: 1;
}
95% {
opacity: 0.05;
}
100% {
opacity: 0;
height: 0;
overflow:hidden;
color: red;
font-size: 48px;
}
}
<header>
<nav class="header_nav_container">
<div class="top_row">
TOP ROW CONTENT
</div>
<div class="bottom_row">
BOTTOM ROW CONTENT
</div>
<div class="third_row">
THIRD ROW CONTENT
</div>
</nav>
</header>
I am trying to Animate a div. What i am actually doing in the animation is translating the div to 100%. but the animation only works in chrome and it is not working in Firefox. i tried to add prefix and i also included prefix-free.js plugin. Caniuse.com says firefox will support animations without prefixing. I have seen lot similar question in stack over flow. but most of them are using property's that are not yet supported in Firefox and other. But mine is very simple. I even tried by removing translation and background-color change. but it is also not working.
HTML:
<div class="container">
<div class="icon"></div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js' ></script>
CSS:
.container {
padding:3em;
}
.icon {
width: 100px;
height: 100px;
background-color: red;
animation: test 1s linear 0 infinite normal both;
}
#keyframes test {
0% {
transform: translateX(50%);
background-color: red;
}
100% {
transform: translateX(0%);
background-color: yellowgreen;
}
}
Demo
Your syntax is invalid. Your zero animation-delay needs to have a unit, so it should be 0s, not 0:
.icon {
width: 100px;
height: 100px;
background-color: red;
animation: test 1s linear 0s infinite normal both;
}
Unitless zeroes are only permitted for lengths, not times. See this answer for an explanation (the question is about transitions, but it applies to animations as well).
Change your animation call to this,
.icon
{
animation: test 1s linear infinite;
}
It seems firefox does not understands some short hand properties.
Write your code like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
padding:3em;
}
.icon, .icon:hover {
width: 100px;
height: 100px;
background: red;
-webkit-animation: test 2s linear infinite; /* Chrome, Safari, Opera */
animation:test 2s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes test {
from {background: red;}
to {background: yellow;}
}
/* Standard syntax */
#keyframes test {
from {background: red;}
to {background: yellow;}
}
</style>
</head>
<body>
<div class="container">
<div class="icon"></div>
</div>
</body>
</html>
I'm given the following task,
Actual html which I have: Two images are stacked on top of each other.(below html) when the user hovers on the foreground image, as per the CSS rules opacity will be transitioned to 0 in 4 seconds and this keeps happening in a cycle.
Fiddle
Modification I have to do: Now I have to perform the same for 5 images. I've tried doing the same as below, could not succeed(See second code snippet). Any hints as to how this can be done only using css ? thanks
Fiddle2
<!-- Melting one image into another using CSS3. -->
<html>
<head>
<meta charset = "utf-8">
<title>Melting Images</title>
<style type = "text/css">
#cover
{
position: relative;
margin: 0 auto;
}
#cover img
{
position: absolute;
left: 0;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
#cover img.top:hover
{ opacity:0; }
</style>
</head>
<body>
<div id = "cover">
<img class = "bottom" src = "jhtp.png" alt = "Java 9e cover">
<img class = "top" src = "jhtp8.png" alt = "Java 8e cover">
</div>
</body>
</html>
What I've tried
<html>
<head>
<meta charset = "utf-8">
<title>Melting Images</title>
<style type = "text/css">
#cover
{
position: relative;
margin: 0 auto;
}
#cover img
{
position: absolute;
left: 0;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
#cover img.top:hover
{ opacity:0; }
#cover img.top1:hover
{ opacity:0; }
#cover img.top2:hover
{ opacity:0; }
#cover img.top3:hover
{ opacity:0; }
</style>
</head>
<body>
<div id = "cover">
<img class = "bottom" src = "jhtp.png" alt = "Java 9e cover">
<img class = "top" src = "jhtp8.png" alt = "Java 8e cover">
<img class = "top1" src = "jhtp1.png" alt = "Java 8e cover">
<img class = "top2" src = "jhtp2.png" alt = "Java 8e cover">
<img class = "top3" src = "jhtp3.png" alt = "Java 8e cover">
</div>
</body>
</html>
You can do that only in CSS, and applying the styles to the container and the children, whatever this are.
I have set an example using div as children, but you can modify it to whatever you want
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
CSS
.container{
width: 80px;
height: 80px;
position: relative;
}
.container div {
position: absolute;
width: 100%;
height: 100%;
font-size: 60px;
opacity: 0;
}
.container div:nth-child(1) {
background-color: yellow;
opacity: 1;
}
.container:hover div {
-webkit-animation: anim 5s infinite;
animation: anim 5s infinite;
}
.container div:nth-child(2) {
-webkit-animation-delay: -4s;
animation-delay: -4s;
}
.container div:nth-child(3) {
-webkit-animation-delay: -3s;
animation-delay: -3s;
}
.container div:nth-child(4) {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.container div:nth-child(5) {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
#-webkit-keyframes anim {
0%, 15% {opacity: 1;}
20%, 95% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes anim {
0%, 15% {opacity: 1;}
20%, 95% {opacity: 0;}
100% {opacity: 1;}
}
fiddle
As hovering is a binary process (you're either hovering an element or you're not), I'm afraid this is not possible with CSS only. You write some JS code that will be also triggeren on hover and that will take care of replacing images below and sorting them. However, that seems like an ugly mishmash.
Maybe you could do it using keyframes, but again, you'd need a way to trigger an animation for each image. I'm talking about building a 20s animation for each image and then modifying the opacity value for each in 4 second intervals. But again, seems like too much effort.
So, I'd strongly suggest you write a simple JS image fader that will handle both the image sorting and fade animations at a slight cost of performance.
If you still want to use as much CSS as possible, go with the keyframes, and set a JS listener on the container element which will add a class to each image - that class would trigger the CSS animation for each image. You'll have to repeat the first image and put it at the bottom. The animation would make the 1st image transparent by the second 4, 2nd image by second 8, etc...
I'm trying to fill a glass of beer at 30% with html and CSS with the technique of this progress bar csstricks.
But I don't know if it's possible.
I have an image of the glass of beer with transparency content (png in illustrator).
Do you know if it's possible to have the progress bar in background ?
My tests were fruitless.:-(
Or do I have to use another technique ?
Thanks a lot for your help !
Nicolas
There you go :D (this is what you can do with a few alterations to the css-trick example):
Demo: http://jsfiddle.net/djnBD/
<html>
<head>
<meta charset="UTF-8">
<title>Fillable Beer Bottle</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(function() {
$(".liquid").each(function() {
$(this)
.data("origHeight", $(this).height())
.height(0)
.animate({
height: $(this).data("origHeight")
}, 1200);
});
});
</script>
<style>
.glass {
height: 200px;
position: relative;
background-image: url('http://i40.tinypic.com/11hyr1j.png'); /* Beer Glass */
background-repeat: no-repeat;
}
.liquid {
z-index:-1;
position:absolute;
bottom:0;
width: 200px;
background-image: url('http://i44.tinypic.com/f0vxbt.jpg'); /* Beer Liquid Pattern */
/* Remove the bottom two lines to stop animation */
-webkit-animation: move 150s linear infinite;
-moz-animation: move 150s linear infinite;
}
#-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 2212px 0px;
}
}
#-moz-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 2212px 0px;
}
}
</style>
</head>
<body>
<div class="glass">
<span class="liquid" style="height: 30%"></span>
</div>
</body>
</html>