When I insert an image into my HTML it gets positioned in the lower left corner for some reason. Even if I set position to center; it stays in that strange position. What could be causing this?
My code:
<!DOCTYPE HTML>
<html>
<header>
<title>Animation Verkefni</title>
<link type="text/css" href="stylesheet2.css" rel="stylesheet"/>
</header>
<body>
<div class="doge1">
<p>
Transitions in CSS are applied to an element and specify that when a property changes it should do so gradually over a period of time. Animations are different. When applied, they just run and do their thing. They offer more fine-grained control as you can control different stops of the animations.
</p>
</div>
<div class="doge2">
<img src="spengbab.jpg">
</div>
</body>
</html>
css:
body {
background-color:gray;
}
p {
font-size:50px;
margin-left:500px;
margin-right:500px;
text-align:center;
margin-top:250px;
font-family:impact;
}
#keyframes myfirst
{
0% {opacity:1;}
25% {opacity:2;}
50% {opacity:3;}
75% {opacity:4;}
100% {opacity:10;}
}
#-webkit-keyframes myfirst /* Safari og Chrome */
{
0% {opacity:1;}
25% {opacity:2;}
50% {opacity:3;}
75% {opacity:4;}
100% {opacity:10;}
}
.doge2 {
position:fixed center;
top:20px;
}
.doge1:hover
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari og Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
Thanks!
Try using position:fixed; & text-align:center;
Like this:
.doge2 {
position:fixed;
top:20px;
width:100%;
text-align:center;
}
Try with
vertical-align:middle;
to keep image at center position.
Related
I built a preloading screen for a website with a loading bar that is animated with CSS #keyframes. Works fine on Chrome and Firefox, but on macOS Safari it gets very discrete. Here is a video demo of how it looks on Safari: https://www.youtube.com/watch?v=ODV5lN2xZSI&feature=youtu.be
As you can see, loading bar background (gray line) and the bar itself (black line) twitch instead of going smoothly from 0% width to 100%. What could be a problem, is this known bug of Safari? Latest macOS and Safari.
#keyframes loading-wrapper-anim {
0% {
width:0%;
}
100% {
width:100%;
}
}
.preloader .loading_wrapper {
position:absolute;
width:0%;
height:1px;
background:#dbdbdb;
top:12rem;
animation: loading-wrapper-anim 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
align-self:flex-start; /*this one is because of the parent element*/
}
.preloader .loading_wrapper .loading_bar {
height:100%;
width:0%;
height:100%;
background:#000;
animation: loading-wrapper-anim 3s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
<div class="preloader">
<div class="loading_wrapper">
<div class="loading_bar">
</div>
</div>
</div>
Smooth animation is expected.
Thank you.
You can attempt to force the hardware acceleration by adding a translateZ on the animation.
.preloader .loading_wrapper {
position:absolute;
width:0%;
height:1px;
background:#dbdbdb;
top:12rem;
animation: loading-wrapper-anim 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
align-self:flex-start;
/* Add this */
-webkit-transform: translateZ(0);
}
JSFiddle
Alternatively, you can look into using the will-change method as a last resort for smoother animations.
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
The way I fixed it is instead of trying to manipulate width of an element (which causes redrawing each time the width changes), did the following:
#keyframes loading-wrapper-anim {
0% {
transform:scaleX(0);
}
100% {
transform:scaleX(1);
}
}
.preloader .loading_wrapper {
position:absolute;
width:100%;
height:1px;
background:#dbdbdb;
top:12rem;
animation: loading-wrapper-anim 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
align-self:flex-start; /*this one is because of the parent element*/
transform:scaleX(0);
transform-origin:0% 0%;
}
.preloader .loading_wrapper .loading_bar {
height:100%;
width:100%;
height:100%;
background:#000;
animation: loading-wrapper-anim 3s;
animation-delay: 2s;
animation-fill-mode: forwards;
transform:scaleX(0);
transform-origin:0% 0%;
}
I used transform:scaleX() in conjunction with transform-origin:0% 0% (this one sets center of transformation to the top left corner) to emulate width change without actually changing it.
Conclusion: use transform where/when possible. They are more efficient in terms of CSS animations and transitions.
Let's say I have a div with a specified height of 100px and I want to animate it so it grows by a fixed 20px height.
The snippet below shows how I implemented it, successfully.
#keyframes foo {
0% {
height: 100px;
}
50% {
height: 120px;
}
100% {
height: 100px;
}
}
#foo1 {
background-color:blue;
width:100px;
height:100px;
animation-name: foo;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
<div id='foo1'>
But what if I need to set the height property outside the CSS, so that it's not a specific value of 100px and it can be changed to any other value, but still, I want to animate an increasing height of a fixed 20px ?
Is there a way to set the animaton value as an offset of the original element value?
Increase the padding if you will not have any content and it's a simple visual animation:
#keyframes foo {
0%,100% {
padding-bottom: 0px;
}
50% {
padding-bottom: 20px;
}
}
#foo1 {
background-color:blue;
width:100px;
height:100px;
animation-name: foo;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
<div id='foo1'>
Or use CSS variables:
#keyframes foo {
0%,100% {
height:var(--h,100px)
}
50% {
height:calc(var(--h,100px) + 20px);
}
}
#foo1 {
background-color:blue;
width:100px;
height:var(--h,100px);
display:inline-block;
animation-name: foo;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
<div id='foo1'></div>
<div id='foo1' style="--h:50px;"></div>
I don't think there is a direct way, but you have several workarounds:
use padding (e.g. padding-bottom) to extend the element's height – only applicable if the element is not supposed to have text content flowing into the padding
use border – same as above
use an extra element, e.g. ::after
use JavaScript – if you are already setting the height "outside" of CSS, it may be that you are setting it with JS?
I have a image that is being spun using animation. The image works perfectly on desktop and some mobile devices. However, on certain devices the image does not show. I made sure the HTML validated and the CSS was working properly. Could there be any other reason for this?
#test {
max-width: 100%;
max-height: 100%;
-webkit-animation-name: spin;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#-moz-keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#-o-keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
<div class="main">
<img src="http://placehold.it/100x100" alt="TESTING" id="test">
</div>
This might just be a matter of it not being possible but here is my CodePen link https://codepen.io/Spectral/pen/QgMdbM?editors=1100
I can't make the gradient animate, am I doing something wrong or is this just not possible?
code:
<h1 class='knockout'>This text should be animated!</h1>
body{background:#fdf}
.knockout{
margin:50px 0 0 0 auto;
font-family:sans-serif;
color:blue;
/* gradient*/
background: linear-gradient(4deg, #4a6bbd, #b65181, #3c636c);
/* animation */
-webkit-animation: gradientAnimation 4s ease infinite;
-moz-animation: gradientAnimation 4s ease infinite;
-o-animation: gradientAnimation 4s ease infinite;
animation: gradientAnimation 4s ease infinite;
#-webkit-keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
#-moz-keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
#-o-keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
#keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
/* knockout*/
background-size:cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip:text;
font-size:20vw;
text-align:center;
/* stroke*/
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #010;
}
The #keyframes {} block of code must be written outside the .knockout {} block of code, rather than within it. Here is an example of the background gradient working:
https://codepen.io/anon/pen/PjJoym?editors=1100
(I removed the #-webkit, #-moz, #-o code to simplify this demonstration)
I don't know if this is exactly what you were looking for, and its a little complicated, but I just added your code to an existing sample of mine. Maybe you could do something with it, I kinda gave up on it.
https://codepen.io/MikeIke/pen/xrgvEW
<div class="header">
<h1>Animated Fixed Knockout Text Example(Work In Progress)</h1>
<h3>Scroll down to see</h3>
</div>
<div id="profile">
<div class="section">
<div id="knock1">
<div id="knock2">
<div class="sectionTitle" id="profileTitle">TEXT</div>
</div>
</div>
</div>
</div>
I found this animation in codepen.io. Everything is working fine but when I test it in firefox the animation is not working.
The code already has browser prefixes so I do not know what is not working in FF.
<!DOCTYPE html>
<html>
<head>
<style>
.loading {
margin-left:auto;
margin-right:auto;
display:table;
border-width:30px;
border-radius:50%;
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
-o-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;
}
.style-1 {
border-style:solid;
border-color:#001e60 transparent
}
.style-2 {
border-style:double;
border-color:#001e60 transparent;
}
.style-3 {
border-style:double;
border-color:#001e60 #fff #fff;
}
#-webkit-keyframes spin {
100% {
-webkit-transform:rotate(359deg);
}
}
#-moz-keyframes spin {
100% {
-moz-transform:rotate(359deg);
}
}
#-o-keyframes spin {
100% {
-moz-transform:rotate(359deg);
}
}
#keyframes spin {
100% {
transform:rotate(359deg);
}
}
</style>
</head>
<body>
<div style="display: block;" class="loading-container">
<span id="loadingIndicator" class="loading style-3"></span>
</div>
</body>
</html>
The problem is having .loading use display: table; without actually specifying a width or height. Using a table like that to imply size is a bit hacky. Chrome is interpreting those dimensions differently than Firefox. It'd be best to explicitly give it a size using css. Try changing it to a block with a width and height like this:
.loading {
margin-left:auto;
margin-right:auto;
display:block;
border-width:30px;
border-radius:50%;
height: 5px;
width: 5px;
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
-o-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;
}
BIN: https://jsbin.com/nedanayopu/edit?html,output