I have to simulate a "wind blow on a plate" and researching a little I found the rotate property, but when I apply it it is rotating the whole image, as shown in the gif below.
However I expected to get something like the image below, but smoother.
Which property to use so that I keep the floor (part where the plate is stuck) in the fixed image?
Use transform-origin: bottom center.
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
border: 1px solid black;
width: 200px;
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
transform-origin: bottom center
}
#keyframes mymove {
0% {
transform: rotate(-20deg);
}
50% {
transform: rotate(20deg);
}
100% {
transform: rotate(-20deg);
}
}
</style>
</head>
<body>
<h1>Animation of transform</h1>
<p>Gradually rotate the element around the bottom center:<p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
</body>
</html>
Found here: https://stackoverflow.com/a/6633676/13867483
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I horizontally center an element?
(133 answers)
Closed 6 months ago.
I am making a circle shrinking and growing with the keyframes animation kit.
I've gived my div a margin-left: 45vw, and margin-top: 45vh. This obviously makes the circle not being centered all of the time as the size of the circle varies.
Is there anything I can add to my code so that the center of the circle always stays at the middle of the screen?
<!DOCTYPE html>
<html>
<style>
#ball {
width: 100px;
height: 100px;
margin-left: 45vw;
background-color: purple;
border-radius: 50%;
animation-name: sprett;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes sprett {
40% {
width: 25px;
height: 25px;
}
50% {
width: 100px;
height: 100px;
}
90% {
width: 175px;
height: 175px;
}
100% {
width: 100px;
height: 100px;
}
}
</style>
<body>
<div id="ball"></div>
</body>
</html>
For a smoother animation you would be better off using scale rather than altering height and width - it animates better but also has the added benefit that the size taken up does not change so any position you put it in to begin with remains - with the transform origin being (by default) at the center of the element you can get the look you want:
<!DOCTYPE html>
<html>
<style>
#ball {
width: 100px;
height: 100px;
margin-left: 45vw;
background-color: purple;
border-radius: 50%;
animation-name: sprett;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes sprett {
40% {
transform: scale(0.25);
}
50% {
transform: scale(1);
}
90% {
transform: scale(1.75);
}
100% {
transform: scale(1);
}
}
</style>
<body>
<div id="ball"></div>
</body>
</html>
However, you code does not exactly center the ball on every viewport (it mixes vw and px units). You can change the tranforms to transform: translateX(-50%) scale(...) and set left: 50vw to center the ball.
I have a moving box (a div changed into a tiny box) on a html page. The box is moving in a curve path that I am describing in animation frames of css.
Now I have to draw a line following this box move, just to mimic a pencil move, so it looks like the line has been drawn by the moving box. As the box moves, a line should start appearing behind it, e.g. just like we draw a line by pen or pencil.
Not sure, if it is possible only in css but if you have any suggestion, please feel free to advice me. Thank you.
here is code
test.html
<html>
<head>
<link rel="stylesheet" href="box.css">
</head>
<body style="background-color: white;">
<div id="box">
<div id="line"></div>
</div>
</body>
<script src = "logo.js"></script>
</html>
css file: box.css
body{
width:100%;
height:100vh;
background-color: black;
}
#box {
margin-top:300px;
margin-left:30px;
top:0;
left:0;
width:30px;
height:40px;
background-color: red;
animation:move-line;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes move-line {
0%{
transform:translateX(0px)translateY(0px) ;
}
50%{
transform:translateX(280px)translateY(0px) ;
}
60%{
transform:translateX(300px)translateY(-100px) ;
}
70%{
transform:translateX(300px)translateY(100px) ;
}
80%{
transform:translateX(320px)translateY(0px) ;
}
90%{
transform:translateX(330)translateY(0px) ;
}
100%{
transform:translateX(400px) ;
}
}
javascript file: logo.js
currently it is empty but if you have a solution feel free to use it with javascript too however css is preferred.
Here is a snippet to demonstrate the idea.
An after pseudo element attached to the red box has a solid white background.
As the box moves, the pseudo element 'goes before it' revealing what is already underneath.
In this demo just the first part of the line has been drawn. You'll need to add the other lines with additional linear-gradients, 3 being at angles and positioned suitably and the last one horizontal again.
Alternatively you could put an image there instead of using linear gradients but I note your question says no SVG so I assume that maybe it isn't allowed a jpg either.
<style>
body {
width: 100%;
height: 100vh;
background-color: black;
}
.container {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background-image: linear-gradient(transparent 0 calc(300px + 20px), black calc(300px + 20px) calc(301px + 20px), transparent calc(301px + 20px) 100%);
background-size: 280px 100vh;
background-repeat: no-repeat;
background-position: 0 0;
}
#box {
margin-left: 30px;
top: 300px;
left: 0;
width: 30px;
height: 40px;
background-color: red;
animation: move-line;
animation-duration: 5s;
animation-iteration-count: infinite;
position: relative;
}
#box::after {
content: '';
position: absolute;
top: -300px;
left: 100%;
height: 100vh;
width: 100vw;
background-color: white;
display: inline-block;
}
#keyframes move-line {
0% {
transform: translateX(0px)translateY(0px);
}
50% {
transform: translateX(280px)translateY(0px);
}
60% {
transform: translateX(300px)translateY(-100px);
}
70% {
transform: translateX(300px)translateY(100px);
}
80% {
transform: translateX(320px)translateY(0px);
}
90% {
transform: translateX(330)translateY(0px);
}
100% {
transform: translateX(400px);
}
}
</style>
<html>
<head>
<link rel="stylesheet" href="box.css">
</head>
<body style="background-color: white;">
<div class="container">
<div id="box">
</div>
</div>
</body>
<script src="logo.js"></script>
</html>
I am trying to move a skewed div from top left off screen, through the screen, to bottom right off screen. The effect I am trying to get is that it looks like a parallelogram appears from somewhere up and to the left, and it slowly moves through the screen in a downwards and rightwards motion and then off the screen to the bottom.
Right now I have this index.html:
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="div1" id="one"></div>
</body>
</html>
And here is my index.css:
div {
animation: rotate-all 2s 0 infinite linear alternate;
}
.div1 {
width: 100px;
height: 1000px;
transform: skew(20deg);
background-color: gray;
position: relative;
margin: auto;
animation-name: down;
animation-duration: 4s;
animation-iteration-count: infinite ;
}
#one {
top: 150px;
}
#keyframes down {
0% {
transform: translate(-200px, -1000px);
transform: skew(20deg);
}
100% {
transform: translate(250px, 750px);
}
}
I have two problems:
First, it is changing shape from the skewed shape (looks like a "\") to a unskewed one (looks like a "|"). If I try to add a skew in my 100% keyframe, then it does not move any more, it just stays in the same place. I tried both orders skew then translate / translate then skew.
Second, it does not seem to start above the screen, but right in the middle of the screen.
Appreciate any advice.
You were overwriting the transform property. Transform accepts multiple styles, separated by spaces. If you add the transform property twice, it will overwrite the first one. Just put the translate and skew on the same line both times and it will work.
For the second part, translate it by percents (relative to itself) rather than pixels (absolute measures).
div {
animation: rotate-all 2s 0 infinite linear alternate;
}
.div1 {
width: 100px;
height: 1000px;
transform: skew(20deg);
background-color: gray;
position: relative;
margin: auto;
animation-name: down;
animation-duration: 4s;
animation-iteration-count: infinite ;
}
#one {
top: 150px;
}
#keyframes down {
0% {
transform: translate(-200%, -200%) skew(20deg);
}
100% {
transform: translate(250px, 750px) skew(20deg);
}
}
<div class="div1" id="one"></div>
So, I have the snippet below and I'd like to add an anchor link to it. Unfortunately, there is no information on how to.
So, how do I add a link inside a data-marquee attribute?
<div class="marquee marquee-speed-normal"
data-marquee="Some text **I want to have a link in here** Some text">
</div>
Have a look at this...
An Anchor can in most cases be placed like this. There are loads of info out there with very little effort on finding them.
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction="right" scrolldelay="300">
This link will take you to a page with what you need to know
</marquee>
<marquee direction="right" scrolldelay="300">
And this is why you should try not to use it.
</marquee>
</body>
</html>
Try this then. From what i've seen, the easiest way was to turn the entire marquee into a link like below. The reason seems to be that data-marquee prints the data and won't represent anything else.
It would be great cool to see if there is another way other than that to display a link within the marquee.
<a href="#1">
<h1 class="marquee marquee-direction-alternate" data-marquee="HTML5 marquee"></h1>
</a>
If you don't come right, I also found this very useful. Here i have done the same with CSS. This is still widely supported.
*/The behavior is determined with CSS*/
<style>
.scroll-slow {
height: 50px;
overflow: hidden;
position: relative;
background: yellow;
color: orange;
border: 1px solid orange;
}
.scroll-slow 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-slow 25s linear infinite;
-webkit-animation: scroll-slow 25s linear infinite;
animation: scroll-slow 25s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-slow {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}
#-webkit-keyframes scroll-slow {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
#keyframes scroll-slow {
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>
*/ And then the anchor is done as follows */
<div class="scroll-slow">
<p>This is my link</p>
</div>
Ok Jim, a long shot
I Is this what you want to do?.
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">
<title>jQuery Marquee Plugin Example</title>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js'></script>
<style>
.marquee {
width: 300px;
overflow: hidden;
border: 1px solid #ccc;
background: #ccc;
}
</style>
</head>
<body>
<div class="marquee">This is my link</div>
<script src="js/index.js"></script> </body>
</html>
index.js
$(".marquee").marquee({
//speed in milliseconds of the marquee
duration: 5000,
//gap in pixels between the tickers
gap: 50,
//time in milliseconds before the marquee will start animating
delayBeforeStart: 0,
//'left' or 'right'
direction: "left",
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true
});
I need to change the background color of my page in a loop. So I have something like this:
.bg-changer {
animation: bg-img-slider 10s linear infinite;
transition: background 300ms ease-in 200ms;
body {
margin: 15px auto;
height: 95vh;
width: 90%;
border: 1px solid silver;
}
.bg-changer {
animation: bg-img-slider 10s linear infinite;
/*transition: background 300ms ease-in 200ms;*/
transition-timing-function: ease-in-out;
transition-duration: 1s;
}
#keyframes bg-img-slider {
0%, 100% {
background-image: radial-gradient(silver, snow);
}
20% {
background-image: radial-gradient(#2b5876, #4e4376);
}
40% {
background-image: radial-gradient(#44A08D, #093637);
}
60% {
background-image: radial-gradient(#DD5E89, #F7BB97);
}
80% {
background-image: radial-gradient(#348F50, #56B4D3);
}
90% {
background-image: radial-gradient(#bdc3c7, #2c3e50);
}
}
.page-header {
padding: 10px 0 5px 15px;
}
.page-header>h1 {
padding-bottom: 5px;
border-bottom: 1px solid gray;
}
.page-header>p {
font-size: 85%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BG</title>
</head>
<body class="bg-changer">
<div class="main-content ">
<div class="page-header">
<h1>Page Title</h1>
<p>This is the tag line</p>
</div>
</div>
</body>
</html>
}
#keyframes bg-img-slider {
0%,
100% {
background-image: radial-gradient(silver, snow);
}
20% {
background-image: radial-gradient(#2b5876, #4e4376);
/*animation-timing-function: ease-in;*/
}
40% {
background-image: radial-gradient(#44A08D, #093637);
}
60% {
background-image: radial-gradient(#DD5E89, #F7BB97);
/*animation-timing-function: ease-in;*/
}
80% {
background-image: radial-gradient(#348F50, #56B4D3);
}
90% {
background-image: radial-gradient(#bdc3c7, #2c3e50);
/*animation-timing-function: ease-in;*/
}
}
I apply the class bg-changer to the body tag. It works but the color change happens like a slap. I tried several things to make it smoother. I tried the transition, animation-timing-fuction and a few others (also placed them in the keyframes). Nothing seems to work!
Please educate me with the following questions I have:
First, obviously, how do I change body background color smoothly rather than instantly (on every keyframe %).
Why does background-color not work? I had to use background-image. What is the correct way to use - background, background-color, background-image?
Thanks in advance.
A gradient is not animatable. (The only exception being the position).
A background-color is animatable, but is limited to a solid color.
div {
width: 200px;
height: 100px;
animation: colors 10s infinite;
}
#keyframes colors {
from {background-color: blue;}
to {background-color: green;}
}
<div></div>
If you want to animate a radial gradient, you can do it somehow with a trick, using a transparency
div {
width: 200px;
height: 100px;
animation: colors 2s infinite;
background-image: radial-gradient(circle, transparent, red);
}
#keyframes colors {
from {background-color: blue;}
to {background-color: green;}
}
<div></div>
But you are limited to animating the inner part, of the outer part
A more elaborate example would be to use a pseudo element, and animate the shadow
div {
width: 200px;
height: 200px;
position: relative;
border: solid 1px red;
overflow: hidden;
}
div:after {
content: "";
width: 300px;
height: 300px;
top: -50px;
left: -50px;
position: absolute;
border-radius: 50%;
animation: colors 3s infinite;
}
#keyframes colors {
from {background-color: green;
box-shadow: inset 0px 0px 80px 80px yellow;
}
to {background-color: blue;
box-shadow: inset 0px 0px 80px 100px red;
}
}
<div></div>
Well, the result isn't good looking, but you get the idea.
I think you are using background properly, but for a smooth transition, use something like animations.
For example: use animation in transitions like animation_in, animation_out etc.Also, try transition timing function like
{
transition-timing-function: ease-in-out;
}
for more http://www.the-art-of-web.com/css/timing-function/.