I have this animated graph that I created, but the start of the path, for some reason, was at 90deg, so I put a transform: rotate(-90deg) on it to start from 0deg. This works fine on my desktop in Chrome and Safari, but when I view it on my iPhone, it seems to ignore my rotate and go back to its default 90deg starting point. I've tried a bunch of prefixes and nothing changes.
Here's the link on CodePen
body {
background-color: #34495e;
}
.skills-graph {
fill: transparent;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
}
#javascript {
visibility: visible;
stroke: #ecf0f1;
animation-name: javascript;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
stroke-dasharray: 880;
stroke-dashoffset: 780;
animation-fill-mode: forwards;
}
#keyframes javascript {
0% {
stroke-dashoffset: 880;
stroke: white;
}
50% {
stroke: #ecf0f1;
}
100% {
stroke-dashoffset: 780;
stroke: #ecf0f1;
}
}
#html {
visibility: visible;
fill: transparent;
stroke: #95a5a6;
animation-name: html;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
stroke-dasharray: 691;
stroke-dashoffset: 271;
animation-fill-mode: forwards;
}
#keyframes html {
0% {
stroke-dashoffset: 691;
stroke: white;
}
50% {
stroke: #95a5a6;
}
100% {
stroke-dashoffset: 271;
stroke: #95a5a6;
}
}
#css {
visibility: visible;
fill: transparent;
stroke: #3dd0ac;
animation-name: css;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
stroke-dasharray: 502;
stroke-dashoffset: 172;
animation-fill-mode: forwards;
}
#keyframes css {
0% {
stroke-dashoffset: 502;
stroke: white;
}
50% {
stroke: #3dd0ac;
}
100% {
stroke-dashoffset: 172;
stroke: #3dd0ac;
}
}
<div id="skills-graph">
<!-- JavaScript Graph -->
<svg id="javascript" class="skills-graph" width="300" height="300">
<circle cx="150" cy="150" r="140" stroke-width="20"/>
</svg>
<!-- HTML Graph -->
<svg id="html" class="skills-graph" width="300" height="300">
<circle cx="150" cy="150" r="110" stroke-width="20"/>
</svg>
<!-- CSS Graph -->
<svg id="css" class="skills-graph" width="300" height="300">
<circle cx="150" cy="150" r="80" stroke-width="20"/>
</svg>
</div>
I do not have the answer, but i played a little bit with the codepen snippet on my iPhone 6s (safari) and when i changed the "-webkit-transform: rotate(-90deg);" (in .skills-graph) to "-webkit-transform: rotate(170deg);" it changes direction. Maybe you can find out the answer now yourself. (i'm not that good with code). Good luck!
EDIT: with "-webkit-transform: rotate(-89deg);" it seems right.
Related
I'm trying to build an animation for opening a hamburger menu. I am struggling to get the hamburger to the x. In theory I seem to be doing everything right but the result tells me otherwise xD. I've been playing around with the translate values and also the transform-origin but it all behaves in (for me) unexpected ways. Could someone have a look and help me out?
My Example: https://codepen.io/aki-sol/pen/RwMoEJQ
<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect class="top" y="8.5" width="48" height="3.875" fill="blue" />
<rect class="middle" y="22.0625" width="48" height="3.875" fill="blue" />
<rect class="bottom" y="35.625" width="48" height="3.875" fill="blue" />
</svg>
svg:hover .top {
animation-name: top;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
/*transform-origin: 25% 25%;*/
animation-fill-mode: forwards;
}
svg:hover .middle {
animation-name: middle;
animation-duration: 1.5s;
animation-timing-function: linear;
transform-origin: center center;
animation-fill-mode: forwards;
}
svg:hover .bottom {
animation-name: bottom;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
/*transform-origin: 25% 25%;*/
animation-fill-mode: forwards;
}
#keyframes top {
0% {
transform: translateY(0);
}
50% {
transform: translateY(30%);
}
100% {
transform: rotate(45deg) translateY(-25%);
}
}
#keyframes middle {
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes bottom {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30%);
}
100% {
transform: rotate(-45deg);
}
}
Goal (first example): https://codepen.io/vineethtrv/pen/VYRzaV
Thanks!
I have changed a little bit the dimensions to make the values easier to calculate.
So, svg width is 48, so I set the transform-origin x value at 24, the center.
For top, y is 8 and height is 4, so the center is at 8 + (4 / 2) = 10.
The corrected demo goes like this:
svg:hover .top {
animation-name: top;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
transform-origin: 24px 10px;
animation-fill-mode: forwards;
}
svg:hover .middle {
animation-name: middle;
animation-duration: 1.5s;
animation-timing-function: linear;
transform-origin: center center;
animation-fill-mode: forwards;
}
svg:hover .bottom {
animation-name: bottom;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
transform-origin: 24px 38px;
animation-fill-mode: forwards;
}
#keyframes top {
0% {
transform: translateY(0);
}
50% {
transform: translateY(30%);
}
100% {
transform: translateY(30%) rotate(45deg);
}
}
#keyframes middle {
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes bottom {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30%);
}
100% {
transform: translateY(-30%) rotate(-45deg);
}
}
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="top" y="8" width="48" height="4" fill="blue" />
<rect class="middle" y="22" width="48" height="4" fill="blue" />
<rect class="bottom" y="36" width="48" height="4" fill="blue" />
</svg>
Perhaps you can play around with the values in the DevTools. Try nudging it with the arrow keys to get it to a position you like. I got the following:
svg:hover .top {
transform-origin: 4% 28%;
}
svg:hover .bottom {
transform-origin: 5% 50%;
}
I have this little image that I want to rotate continuously or at least have a shorter break between animations.
Here's a gif of the behaviour (it's a bit ugly because of my gif-record-software, but the pause is the thing I wish to highlight here):
My css (less):
.add{
vertical-align: middle;
line-height: 35px;
display: inline-block;
margin-top: 8px;
margin-left:5px;
svg{
fill:#colorOnBright;
max-width: 30px;
max-height: 25px;
vertical-align: middle;
}
}
.animated {
animation-name: rotation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
markup:
<svg class="add animated" click.delegate="Add()">
<use xlink:href="#add"></use>
</svg>
So, how do I get rid of the pause? or alternatively make the pause shorter.
Thanks in advance.
EDIT:
I can't make sense of this.. I've tried recreating the thing in a pen, and it works just fine. Is there some other css-property that interferes with the animation somehow?
https://codepen.io/litari/pen/ajdpjp
edit2:
If I inspect and view the animations, I get this:
So it goes from 0 to 360 degrees at 25% and for the remaining 75% it just stays at 360deg.
If I understand you correctly, replace:
.animated {
animation-timing-function: ease;
}
with:
.animated {
animation-timing-function: linear;
}
The linear timing-function value maintains the same speed throughout the animation.
https://www.smashingmagazine.com/2014/04/understanding-css-timing-functions/#linear
div {
display: inline-block;
}
.animated {
animation-name: rotation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease;
transform-origin: center;
}
#keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
.linear {
animation-timing-function: linear;
}
<div class="animated">+</div>
<p>and with linear:</p>
<div class="animated linear">+</div>
Setting animation-timing-function: linear and -webkit-transform: rotate(360deg) works fine
.animated {
width: 50px;
height: 50px;
border-radius: 50%;
background: black;
animation-name: rotation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.ball{
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
<div class="animated">
<div class="ball"></div>
</div>
Found the problem! There was already an animation called rotation somewhere in my project. Changed the name and everything works fine.
Thanks all for your answers
Try using this small change
animation-timing-function: linear;
animation-duration: 3s;
-webkit-transform: rotate(360deg);
I want it to repeat the animation from where the hover has been 'released. So this is what my code looks like:
<section class="container">
<figure class="chart" data-percent="100">
<figcaption>HTML</figcaption>
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
</section>
This is the HTML I have got.
.outer {
fill: transparent;
stroke: #333;
stroke-width: 10;
stroke-dasharray: 534;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart[data-percent='100'] {
stroke-dashoffset: 0;
-webkit-animation: show100 2s;
animation-name: show100;
animation-duration: 2s;
}
.chart:hover .outer {
stroke-dashoffset: 534;
-webkit-animation: show0 2s;
animation-name: show0;
animation-duration: 2s;
}
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes show0 {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 534;
}
}
#keyframes show0 {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 534;
}
}
I am not sure if 'release' is the right word but I can't think of anything better right now.
So if you hover it, that animation will be reversed. But what I want to accomplish is that when you release the hover at 50%, the animation will play from 50% and when you release the hover at 20% that the animation will play from 20%. I haven't got really, I got stuck after the hover-reverse.
this is a live example of my working code:
https://jsfiddle.net/172dLc93/
Thanks
Use animation for the initial setup, but then use transitions so that it continues from where it left.
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
font-family: 'Lato';
}
.container {
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
}
.chart figcaption {
padding: 50px 25px;
width: 100px;
height: 50px;
border: 20px solid #f0f0f0;
border-radius: 100px;
line-height: 50px;
}
.chart svg {
position: absolute;
top: 0;
left: 0;
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 10;
stroke-dasharray: 534;
transition:stroke-dashoffset 2s;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart[data-percent='100'] {
stroke-dashoffset: 0
-webkit-animation: show100 2s;
animation-name: show100;
animation-duration: 2s;
}
.chart:hover .outer {
stroke-dashoffset: 534;
}
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
<section class="container">
<figure class="chart" data-percent="100">
<figcaption>HTML</figcaption>
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
</section>
Updated fiddle: https://jsfiddle.net/gaby/172dLc93/4/
I have a material loader, and I'm having difficulties figuring out how to enlarge the animation.
HTML & CSS:
.loading-directive {
position:relative;
clear:both;
top: 37px
}
.loading-directive .loader {
position:relative;
margin:0 auto;
width:65px;
height:64px;
zoom:1;
}
.loading-directive .circular {
-webkit-animation:loadingrotate 2s linear infinite;animation:loadingrotate 2s linear infinite;height:64px;position:relative;width:65px
}
.loading-directive .path {
stroke-dasharray:1,200;
stroke-dashoffset:0;
-webkit-animation:loadingdash 1.5s ease-in-out infinite;animation:loadingdash 1.5s ease-in-out infinite;
stroke-linecap:round;
stroke:#333333;
}
#-webkit-keyframes loadingrotate{
100%{
-webkit-transform:rotate(360deg);transform:rotate(360deg)
}
}
#keyframes loadingrotate{
100%{
-webkit-transform:rotate(360deg);transform:rotate(360deg)
}
}
#-webkit-keyframes loadingdash{
0%{
stroke-dasharray:1,200;stroke-dashoffset:0
}
50%{
stroke-dasharray:150,200;stroke-dashoffset:-50
}
100%{
stroke-dasharray:150,200;stroke-dashoffset:-185
}
}
#keyframes loadingdash{
0%{
stroke-dasharray:1,200;stroke-dashoffset:0
}
50%{
stroke-dasharray:150,200;stroke-dashoffset:-50
}
100%{
stroke-dasharray:150,200;stroke-dashoffset:-185
}
}
<div class="loading-directive" id="product-image-container" style="display: block;">
<div class="loader">
<svg class="circular">
<circle class="path" cx="32" cy="32" r="30" fill="none" stroke-width="4">
</circle>
</svg>
</div>
</div>
Loader in question:
https://jsfiddle.net/012k581h/
I need the loader to be 25% larger than displayed here. What properties must be adjusted to achieve this?
You can use the the scale property using css
.loading-directive .loader {
position: relative;
margin: 0 auto;
width: 65px;
height: 64px;
zoom: 1;
transform: scale(1.5, 1.5);
-webkit-transform: scale(1.5, 1.5);
-moz-transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5);
-o-transform: scale(1.5, 1.5);
}
See snippet below
.loading-directive {
position: relative;
clear: both;
top: 37px
}
.loading-directive .loader {
position: relative;
margin: 0 auto;
width: 65px;
height: 64px;
zoom: 1;
transform: scale(1.5, 1.5);
-webkit-transform: scale(1.5, 1.5);
-moz-transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5);
-o-transform: scale(1.5, 1.5);
}
.loading-directive .circular {
-webkit-animation: loadingrotate 2s linear infinite;
animation: loadingrotate 2s linear infinite;
height: 64px;
position: relative;
width: 65px
}
.loading-directive .path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: loadingdash 1.5s ease-in-out infinite;
animation: loadingdash 1.5s ease-in-out infinite;
stroke-linecap: round;
stroke: #333333;
}
#-webkit-keyframes loadingrotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
#keyframes loadingrotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
#-webkit-keyframes loadingdash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 150, 200;
stroke-dashoffset: -50
}
100% {
stroke-dasharray: 150, 200;
stroke-dashoffset: -185
}
}
#keyframes loadingdash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 150, 200;
stroke-dashoffset: -50
}
100% {
stroke-dasharray: 150, 200;
stroke-dashoffset: -185
}
}
<div class="loading-directive" id="product-image-container" style="display: block;">
<div class="loader">
<svg class="circular">
<circle class="path" cx="32" cy="32" r="30" fill="none" stroke-width="4">
</circle>
</svg>
</div>
</div>
Hey i'm trying to make a fancy border animation around some words and it's working well in Firefox & Chrome but not in IE. I was wondering if somebody knew why it isnt working in IE? The animation won't initiate.
My HTML
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="top" x1="-146" y2="0" x2="400" y2="0" />
<line class="left" x1="0" y1="60" x2="0" y2="-30" />
<line class="bottom" x1="292" y1="30" x2="-264" y2="30" />
<line class="right" x1="146" y1="-30" x2="146" y2="60" />
</svg>
<h2>My Words</h2>
My CSS
h2 {
font-family:'Source Sans Pro', sans-serif;
font-size: 1em;
text-align: center;
line-height: 30px;
color: black;
letter-spacing: 0.07em;
}
.box {
width: 146px;
height: 30px;
position: relative;
margin: 0 auto 15px auto;
color: #2c3e50;
padding-bottom: 0.05em;
padding-left: 1px;
padding-right: 0.05em;
}
.box svg {
position: absolute;
top: 0;
left: 0;
overflow:hidden;
}
.box svg line {
stroke-width: 3;
stroke: #000;
fill: none;
}
.box svg line.top, .box svg line.bottom, .box svg line.left, .box svg line.right {
-webkit-animation-delay: 0.25s !important;
-moz-animation-delay: 0.25s !important;
-ms-animation-delay: 0.25s !important;
-o-animation-delay: 0.25s !important;
animation-delay: 0.25s !important;
}
.box svg line.top {
stroke-dasharray: 146;
-webkit-animation: Topline 1s;
-moz-animation: Topline 1s;
-ms-animation: Topline 1s;
-o-animation: Topline 1s;
animation: Topline 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.box svg line.bottom {
stroke-dasharray: 146;
-webkit-animation: Bottomline 1s;
-moz-animation: Bottomline 1s;
-ms-animation: Bottomline 1s;
-o-animation: Bottomline 1s;
animation: Bottomline 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.box svg line.left {
stroke-dasharray: 30;
-webkit-animation: Leftline 1s;
-moz-animation: Leftline 1s;
-ms-animation: Leftline 1s;
-o-animation: Leftline 1s;
animation: Leftline 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.box svg line.right {
stroke-dasharray: 30;
-webkit-animation: Rightline 1s;
-moz-animation: Rightline 1s;
-ms-animation: Rightline 1s;
-o-animation: Rightline 1s;
animation: Rightline 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes Topline {
100% {
-webkit-transform: translateX(-146px);
}
}
#keyframes Topline {
100% {
-moz-transform: translateX(-146px);
-ms-transform: translateX(-146px);
-o-transform: translateX(-146px);
transform: translateX(-146px);
}
}
#-webkit-keyframes Bottomline {
100% {
-webkit-transform: translateX(146px);
}
}
#keyframes Bottomline {
100% {
-moz-transform: translateX(146px);
-ms-transform: translateX(146px);
-o-transform: translateX(146px);
transform: translateX(146px);
}
}
#-webkit-keyframes Leftline {
100% {
-webkit-transform: translateY(30px);
}
}
#keyframes Leftline {
100% {
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
}
}
#-webkit-keyframes Rightline {
100% {
-webkit-transform: translateY(-30px);
}
}
#keyframes Rightline {
100% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px);
}
}
Here is a setup of what i'm trying to accomplish : Fiddle
And this is the demo that I roughly followed.