On my website, a keyframes animation is supposed to tint in blue an image. But the position:fixed of the property making this very same image responsive seems to mess with the keyframes.
If I remove the position:fixed, the blue tint transition occurs. But when I put it back, the tint transition is white instead of blue.
For the codepen : click here
Is there any way to get both of these properties to work along ?
Here's the code :
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="hover-min.css" />
<link rel="stylesheet" href="main.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type="application/javascript" src="dist/js/jquery-2.1.4.min.js"></script>
<script type="application/javascript" src="dist/js/bootstrap.min.js"></script>
<script src="script/jquery.js" type="text/javascript"></script>
<script src="background.js" type="text/javascript"></script>
</head>
<body>
<div id="opacity"> <!-- DIV containing the image supposed to turn blue -->
<img src="http://www.nexusyouthsummit.org/wp-content/uploads/2013/09/nyc-fisheye-20121.jpg" alt="" class="nyc" />
</div>
</body>
</html>
/* CSS */
img.nyc {
*position:fixed; /* property messing with the blue tint transition, rendering it white unless I remove it */
top:0;
left:0;
z-index:-1;
}
#opacity {
background-color: #428BCA;
display:inline-block;
}
#opacity img {
height : 300px;
opacity: 0.5;
-webkit-animation: animation 2s linear;
-moz-animation: animation 2s linear;
-ms-animation: animation 2s linear;
-o-animation: animation 2s linear;
animation: animation 2s linear;
}
#-webkit-keyframes animation{
from{
opacity: 1;
}
to{
opacity: 0.5;
}
}
#-moz-keyframes animation{
from{
opacity: 5;
}
to{
opacity: 0.5;
}
}
#-ms-keyframes animation{
from{
opacity: 5;
}
to{
opacity: 0.5;
}
}
#-o-keyframes animation{
from{
opacity: 1;
}
to{
opacity: 0.5;
}
}
#keyframes animation{
from{
opacity: 5;
}
to{
opacity: 0.5;
}
}
Move the fixed positioning to #opacity:
#opacity {
position: fixed;
}
"#opacity" doesn't know how big it should become after you set it's child to position:absolute or position:fixed.
If you set
#opacity {
height : 300px;
width: 660px;
position: fixed;
background-color: #428BCA;
display:inline-block;
}
it will work again.
You will likely need some js-code to crop the parent to it's biggest child.(https://stackoverflow.com/a/2822685/5191731)
Related
I am trying to use the fade out animation in CSS and it works at first but then at the last minute the element pops back. JSFiddle: https://jsfiddle.net/eqb02w5u/
HTML Code:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<div class='fade-in'>Fading In</div>
<div class='fade-out'>Fading Out</div>
CSS Code:
.fade-in {
background-color: red;
animation:fadeIn 3s linear;
}
#keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1;
}
}
.fade-out {
background-color: green;
animation:fadeOut 3s linear;
}
#keyframes fadeOut {
100% {
opacity:0
}
0% {
opacity:1;
}
}
This is a really old question but you can add:
animation-fill-mode: forwards;
in each class where you want the animation to stay faded out.
i'm studying css3 animation from a playlist in youtube , i made a box comes from top and make swing
my problem is that when make a swing not starting where first animation left, here's the code :
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="box">
<span>X</span>
</div>
</div>
</body>
</html>
CSS :
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.box {
width: 400px;
height: 200px;
margin:0 auto;
transform: translateY(100px);
background: red;
transform-origin: 10px 10px;
animation: box 2s forwards,mm 1s 3s linear forwards;
}
span{
border:2px solid yellow;
background-color: yellow;
}
#keyframes box {
0%{
transform: translateY(-200px);opacity: 0;
}
70%{
transform: translateY(150px);
}
100%{
transform: translateY(100px); opacity: 1;
}
}
#keyframes mm {
0%{
transform: translateY(100px);transform: rotateZ(0deg);
}
40%{
transform: translateY(100px);transform: rotateZ(90deg);
}
70%{
transform: translateY(100px);transform: rotateZ(70deg);
}
100%{
transform: translateY(100px);transform: rotateZ(75deg);
}
}
wheres the problem ?
here's the video that i watched for this animation: CSS Animation Tutorial #11 - Animating a Pop-up
you've done it wrong in 'mm' keyframes,
when you are writing transform, you are doing
transform: translateY(100px);
transform: rotateZ(0deg);
and this first transform property gets overridden by the second transform property (Cascading), so writing it like this would fix it.
#keyframes mm {
0%{
transform: translateY(100px) rotateZ(0deg);
}
40%{
transform: translateY(100px) rotateZ(90deg);
}
70%{
transform: translateY(100px) rotateZ(70deg);
}
100%{
transform: translateY(100px) rotateZ(75deg);
}
}
Checkout the codepen here
I found a css code to make a text sliding on my webpage from right to left, I found that I can adjust the speed of the slide in this line "animation: scroll-left 20s linear infinite;" where I can change the "seconds" argument.
But I would like the text to be repeated, i.e something like this:
Please read this page Please read this page Please read this Please read Pl
instead of:
Please read this page
where one have to wait that the text finish the line to come back again.
Here is my code for now:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.scroll-left {
height: 50px;
overflow: hidden;
position: relative;
}
.scroll-left p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 20s linear infinite;
-webkit-animation: scroll-left 20s linear infinite;
animation: scroll-left 20s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
</style>
<body>
<div class="container">
<br><br><br><br><br><br><br><br><br><br>
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<div class="scroll-left">
<p>Please read this page </p>
</div>
</div>
</div>
</div>
</body>
</html>
I have tried all the options of this css code, but no one makes what I need.
Thank you
There are so many alternatives through which you can accomplish your job like marquee css and javascript etc. According to your requirement you need a custom code like css and js as well.
Please check the link. this is what you need.
http://jsfiddle.net/roine/TCJT4/
Hope this helps!
Based on your request of a pure css solution, there's no other way to duplicate the text without appending a new one or using javascript:
.scroll-left p:before, .scroll-left p:after{
content: 'Please read this page';
margin: 0 20px;
}
On my page load I'm trying to get text to move up and fade in on page load.
(Example here: https://fabriceleven.com/design/creating-fancy-css3-fade-in-animations-on-page-load/)
I've got the fade in working fine, however when I try the code below for the moveUp animation, the text doesn't appear at all. Where am i going wrong?
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
#keyframes moveUp {
0% {
transform: translate(0px,20px);
}
100% {
transform: translate(0px,0px);
}
}
.move-up {
animation:moveUp ease-in 1;
animation-fill-mode:forwards;
animation-duration:1s;
}
And my HTML:
<h1 class="paddingTop20 fade-in move-up">Leading Topic</h1>
This can be best achieved with javascript. Something along the line of this,
<!DOCTYPE html>
<head>
<title>Happy rising text</title>
<style type="text/css">
#yourHtmlTag{
text-align: center;
/*This is needed.*/
position: absolute;
top: 30%;
transition: all 1s ease-out;
}
</style>
</head>
<body onload="floatUp()">
<header id="yourHtmlTag">Float Up!</header>
<!-- The script needs to be below where it is called -->
<script type="text/javascript">
function floatUp(){
document.getElementById('yourHtmlTag').style.top = "15%";
}
</script>
</body>
This has been tested, if you have any other questions don't hesitate to ask!
Can somebody help me, please. I'm starting with css animations and transforms. What i want is an infinite rotation of a division (with svg inside). My css/html5 concoction works fine in Firefox but not in Google Chrome. I'm not sure where the problem lies. This is the link:
Infinite CSS Rotation
And a second step I want to control the animation with jQuery. This again doesn't work in Chrome but it does in FF. The link to this extended example:
Infinite CSS Rotation with jQuery control
Any clue will be much appreciated.
Try this,you forgot #keyframe and -webkit-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rotate Infinitely</title>
<style type="text/css">
#container {
background-color:rgba(245, 168, 66, 0.4);
height:250px;
margin:50px auto;
width:250px;}
#rotate1 {
-webkit-animation: rot_inf 5s infinite linear;
animation: rot_inf 5s infinite linear;
}
#keyframes rot_inf {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/* transform-origin: 50% 50%; */}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* transform-origin: 50% 50%; */}
}
#-webkit-keyframes rot_inf {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/* transform-origin: 50% 50%; */}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* transform-origin: 50% 50%; */}
}
</style>
</head>
<body>
<div id="container">
<div id="rotate1"><img width="250" height="250" alt="cog" src="http://testline.memetic-tv.net/css_rotate_infinite/img/cogwheel2.svg"></div>
</div>
</body>
</html>
Here is a simple example based on:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
at the bottom of the page it provides a webkit animation demo which I edited in order to demonstrate the -webkit-animation-play-state
jsfiddle
In short it could be accomplished by detecting the current animation state, and based on that set -webkit-animation-play-state to running or paused
html:
<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi"></div>
click
js:
$('a').click(function(){
var $p = $('.hi');
var state = $p.css("-webkit-animation-play-state")
console.log(state);
if (state == "running"){
$p.css("-webkit-animation-play-state", "paused");
} else {
$p.css("-webkit-animation-play-state", "running");
}
return false;
})
css:
.hi {
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
Rotate division infinite using css and html
css code is :
<style>
div{
height:200px;
width:200px;
-webkit-animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
</style>
div in HTML
<html>
<body>
<div><img src="xyz.png" height="200px" width="200px"/></div>
</body>
</html>
in div a image rotate infinite