This question already has answers here:
Why is blue circle not spinning in the center of itself [duplicate]
(2 answers)
Closed 2 years ago.
I am wanting to create a logo with a spinning icon in the centre. I have a few paths in it, and just want to spin one of the paths, that i have named on its central axis. I found many examples online, but couldn't get it to spin on its central axis.
I then have now simplified it to the following code pen.
If I spin a simple div, this works fine.
However if I try to spin a path inside an svg, it does not spin correctly.
What am I missing?
<html>
<head>
<style>
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
rect {
animation: spin 2s infinite linear;
}
#rect{
width: 100px;
height: 100px;
animation: spin 2s infinite linear;
}
</style>
</head>
<body>
<div id="rect" style="background-color: blue; border: solid thin black;"></div>
<svg xmlns="http://www.w3.org/2000/svg">
<rect width='100' height='100' fill="green" stroke="black" />
</svg>
</body>
</html>
codepen
Add this selector with your <style>...</style> tag:
svg {
width: 100px;
height: 100px;
overflow: overlay;
}
Also, override the default transform-origin rule for rect:
rect {
...
transform-origin: unset;
}
<html>
<head>
<style>
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
svg {
width: 100px;
height: 100px;
overflow: overlay;
}
rect {
animation: spin 2s infinite linear;
transform-origin: unset;
}
#rect {
width: 100px;
height: 100px;
animation: spin 2s infinite linear;
}
</style>
</head>
<body>
<div id="rect" style="background-color: blue; border: solid thin black;"></div>
<svg xmlns="http://www.w3.org/2000/svg">
<rect width='100' height='100' fill="green" stroke="black" />
</svg>
</body>
</html>
Related
Hey i have tried animation on a 2px solid line that fill white color from center to its end but failed because it just filled right to left and not gained from direction inverse.
Can any body tells me how to create the animation that work like this:
This is just the structure. The 2px height and 100px width just from the point + and fill the color from center to the ends in equal length from left and right and complete this type of animation. Hope I had explained my question with detail.
[----------+----------]
[---------+++---------]
[--------+++++--------]
[-------+++++++-------]
[------+++++++++------]
[-----+++++++++++-----]
[----+++++++++++++----]
[---+++++++++++++++---]
[--+++++++++++++++++--]
[-+++++++++++++++++++-]
[+++++++++++++++++++++]
something like below:
.line {
width:100px;
height:2px;
background:linear-gradient(red 0 0) center/0% 100% no-repeat;
animation:l 2s linear infinite alternate;
}
#keyframes l {
to {background-size:100% 100%}
}
<div class="line"></div>
Solution with stroke-dasharray
A line 100px long is drawn from the center with two rays.
Before starting animation stroke-dasharray: 0.50 0.50; both rays have
a dash equal to zero, and the maximum gap length is 50px. Therefore,
the line is initially invisible.
At the end of the animation, the gap of both rays become equal to
zero, and the dash takes on a maximum value of 100px, so the line
becomes fully visible
#pol{
fill:none;
stroke:red;
stroke-width:2;
stroke-dasharray:0,50 0,50;
animation:mid 2s linear infinite alternate;
}
#keyframes mid {
to {stroke-dasharray:0,0,100,0;}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200" >
<polyline id="pol" stroke-dasharray="0,100" points="50,50 150,50" >
</polyline>
<text x="100" y="46" font-size="24px" text-anchor="middle" fill="black"> animate</text>
</svg>
The trick here for making from center to left is decreasing margin-left in animation
.wrapper {
position: relative;
width: 200px;
height: 2px;
background-color: #000000;
}
#inner-right,
#inner-left {
width: 0;
height: 100%;
background: white;
}
#inner-left {
margin-left: 50%;
animation: centerToLeft 2000ms ease forwards infinite;
}
#inner-right {
position: absolute;
top: 0;
left: 50%;
animation: centerToRight 2000ms ease forwards infinite;
}
#keyframes centerToRight {
to {
width: 50%;
}
}
#keyframes centerToLeft {
to {
margin-left: 0;
width: 50%;
}
}
<div class="wrapper">
<div id="inner-left"></div>
<div id="inner-right"></div>
</div>
Is it possible to make an animation of a perfect circle beginning with an SVG line, which will widen from the center of the line and become a circle?
I've been browsing about it, but it doesn't suit my expectations. Either because the keywords I use are wrong or something else.
I have this for my line:
<svg height="210" width="500">
<line x1="150" y1="150" x2="50" y2="150" style="stroke:rgb(255,0,0); stroke-width:2" />
</svg>
… and the process I'm looking for will be like this:
You can do this with pure CSS:
.box {
width:200px;
height:4px;
background:radial-gradient(circle,#000 99px,transparent 100px);
animation:toCircle 5s linear 1s forwards;
}
#keyframes toCircle{
to{
height:200px;
}
}
body {
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
<div class="box">
</div>
You can elegantly transform an SVG ellipse from a line to a circle:
svg {
background-color: #fff;
}
ellipse {
background:radial-gradient(circle,#000 99px,transparent 100px);
animation:toCircle 1s linear 1s forwards;
}
#keyframes toCircle{
to {
ry:50;
}
}
<svg width="700" height="500">
<ellipse cx="100" cy="100" rx="50" ry="0.1"/>
</svg>
I just want to animate my image through curved path. Like this way. ( I'm using position absolute for positioning. ) Did some research and found that css transform can do the job. It can be easily done by straight line. But curved path?
I tried to combine with css transform-origin + transform:rotate but I didn't get exact that I want. Clearly I want to move around 80% to the left curved and need to come to original position. I tried so many times adjusting my code but still no luck.
Fiddle
P.S
What is transform-origin really do here? Is it necessary?
Can someone explain me about how transform:rotate works here?
Here is my code
.sun{
width: 5.7%;
position: absolute;
top: -5%;
left: 57%;
animation: circle 10s linear infinite;
transform-origin: 0px 700px;
animation-fill-mode: forwards;
animation-direction: alternate;
}
#keyframes circle {
from {
transform:rotate(-60deg);
}
to {
transform:rotate(40deg);
}
}
<div class="sun">
<img src="sun.png" alt="">
</div>
Maybe make parent element move by rotate and children (in my case pseudoelement, whatever) make position absolute to the parent. And just use animation. Look at my solution. Maybe you will have to create some wrapper and use overflow: hidden, because it is square which is rotating. You can watch square's behavior by adding background-color.
#keyframes move-sun {
from {
transform: rotate(0deg);
}
to {
transform: rotate(90deg);
}
}
.sun {
position: relative;
width: 400px;
height: 400px;
margin: 200px;
transform: rotate(90deg);
animation: move-sun 10s;
}
.sun::before {
content: "";
position: absolute;
top: -25px;
left: -25px;
width: 50px;
height: 50px;
background-color: #ff0;
border-radius: 50%;
}
<div class="sun">
</div>
I realize this is an old question, but I just wanted to add another option. You could use 2 separate animations, one for the x-motion and one for the y-motion:
body {
background: #8DBECC;
}
.container {
position: relative;
height: 100%;
width: 100%;
}
.sun {
position: absolute;
width: 30px;
height: 200px;
animation: x-motion 3s ease-in-out 0s infinite alternate;
}
.sun:before {
content: '';
width: 30px;
height: 30px;
position: absolute;
top: 100%;
background: #F18C3E;
animation: y-motion 3s ease-in-out 0s infinite alternate;
border-radius: 15px;
}
#keyframes x-motion {
0% {
left: 0;
}
100% {
left: calc(100% - 30px);
}
}
#keyframes y-motion {
0%, 100% {
top: 100%;
}
50% {
top: 0%;
}
}
<html>
<body>
<div class="container">
<div class="sun">
</div>
</div>
</body>
</html>
https://jsfiddle.net/561pbt0r/27/
It might not be easy with CSS, but you can easily do this with SVG animation.
I modified a sample from this tutorial for your case:
<svg width="500" height="350" viewBox="0 0 350 350">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M100,100Q250,-50,400,100"/>
<g id="sun" transform="translate(-100, -300)">
<circle cx="100" cy="300" r="25" fill="yellow"/>
</g>
<animateMotion
xlink:href="#sun"
dur="3s"
begin="0s"
fill="freeze"
repeatCount="indefinite"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>
When you want to apply some transform operation to an element, that transformation has a reference point from where it will be applied. That is the origin point and by default it is at the center of every element (i.e.: transform-origin(50% 50%)).
With this statement you can modify that origin whenever you need the transformation to apply from a different origin.
Here you can see an example when the rotation is done from the top left corner. Without the origin modification, it would rotate around its center.
Note: You can set the transform-origin even outside the element
The following animation works fine in Chrome and Opera, but it doesn't work in Mozilla Firefox. I can't figure out why.
Can someone please help me to fix the problem? What is wrong with my CSS?
#text-logo {
font-family: 'Shrikhand', cursive;
stroke-dashoffset: 100%;
stroke-dasharray: 100%;
-moz-animation: draw 8s forwards ease-in;
-webkit-animation: draw 8s forwards ease-in;
animation: draw 8s forwards ease-in;
background-clip: text;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
<div class="draw_text">
<svg width="1092" height="220">
<text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text>
</svg>
</div>
Units have to match in Firefox so if the base is a percentage unit then the animated value must be in percentages too.
There's no such thing as a -moz-animation or -moz-keyframes and any prefixed animations should be placed before the unprefixed version. I've fixed that too below.
#text-logo {
font-family: 'Shrikhand', cursive;
stroke-dashoffset: 100%;
stroke-dasharray: 100%;
-webkit-animation: draw 8s forwards ease-in;
animation: draw 8s forwards ease-in;
background-clip: text;
}
#-webkit-keyframes draw {
100% {
stroke-dashoffset: 0%;
}
#keyframes draw {
100% {
stroke-dashoffset: 0%;
}
}
}
<div class="draw_text">
<svg width="1092" height="220">
<text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text>
</svg>
</div>
Setting stroke-dashoffset: 100% looks like a neat thing, but 100% of what? The canonical definition is:
If a percentage is used, the value represents a percentage of the current viewport …
… the percentage is calculated as the specified percentage of sqrt((actual-width)**2 + (actual-height)**2))/sqrt(2).
Firefox seems to not implement that. Setting px lengths makes it work:
#text-logo {
font-family: 'Shrikhand', cursive;
stroke-dashoffset: 1114px;
stroke-dasharray: 1114px;
-moz-animation: draw 8s forwards ease-in;
-webkit-animation: draw 8s forwards ease-in;
animation: draw 8s forwards ease-in;
background-clip: text;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
<div class="draw_text">
<svg width="1092" height="220">
<text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text>
</svg>
</div>
I'm trying to create a simple line-drawing using stroke-dasharray and stroke-dashoffset. It works fine on FF but not showing up at all on Chrome and Safari, and I can't figure out why. Any help would be appreciated!
<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<style>
.cloud{
fill:none;
stroke-dasharray:900;
stroke-dashoffset:900;
animation: dash 2s linear infinite;
}
#keyframes dash {
from {stroke-dashoffset:900}
to {stroke-dashoffset:0}
transition-timing-function: ease-in;
}
.center{
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:320px;
}
</style>
</head>
<body>
<div class="center">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 316 230"
width="316" height="230">
<path class="cloud" stroke="#4cb2e1" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"
d="M61.8,55.8
c-33.4,4.2-57,34.7-52.7,68c3.9,31,30.5,53.5,61,53.2c0,0.3,0.1,0.6,0.1,0.8c3,23.3,24.2,39.7,47.5,36.8
c13.5-1.7,24.8-9.6,31.2-20.5c11.1,17.6,31.8,28.2,53.9,25.4c23-2.9,40.9-19.5,46.6-40.6c4.2,0.5,8.5,0.5,12.8,0
c28.5-3.6,48.6-29.6,45-58c-2.3-18.1-13.7-32.8-28.9-40.2c0-2.4-0.1-4.8-0.4-7.2c-3.5-27.6-28.7-47.1-56.3-43.6
c-6.7,0.8-12.9,3-18.5,6.1c-12.6-21-36.7-33.7-62.5-30.4c-28.3,3.6-49.9,25.3-54.6,52.1"/>
</svg>
</div>
</body>
</html>
Webkit and Blink based browsers still require the -webkit- prefix for animation and #keyframes. Just provide duplicates of those items with the prefix and all should work.
-webkit-animation: dash 2s linear infinite;
animation: dash 2s linear infinite;
#keyframes dash {
...snip...
}
#-webkit-keyframes dash {
...snip...
}