I am facing a problem with svg on my portfolio page.
I have created svg and I used animation to spin the svg in infinite loop. Problem occures when I reload my portfolio page multiple times. When I do, my screen starts to move towards the center of spinning. I am looking for fix, anyone knows what might help?
images:
after few reloads:
and here is my code:
html {
font-size: 62.5%;
background-color: var(--color-tertiary);
overflow-x: hidden; // My svg is really big and it overflows page, so I need to use this
}
/***************** HEADER **********************/
.header{
width: 100vw;
height: 100vh;
background-position: center;
background-size: cover;
position: relative;
&__logo{ // this is the svg
position: absolute;
top: 0;
left: 30rem;
width: 180rem;
z-index: -1; // I use z-index to make sure that moving svg is in the background of the page
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 500s linear infinite;
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg);} }
}
&__wrapper{
z-index: 10;
}
}
What I see that this part:
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg);} }
is inside of the class. All keyframes should be standalone. In the #keyframes line also remove -webkit- from transform.
Related
I have one SVG image and I have added animation on it using CSS it works fine in Chrome and Mozilla, and also on Android but not working on iOS both Chrome and Safari.
The problem is that I can see the image displayed but the animation spinning is not working.
I have the following animation applied to my simple SVG:
<img class="img-sth"src="/img/image.svg">
The css code:
.img-sth {
position: absolute;
height: 80px;
top: -3px;
left: 16px;
-webkit-animation:spin-faster 4s linear 0.01s infinite;
-moz-animation:spin-faster 4s linear 0.01s infinite;
animation:spin-faster 4s linear 0.01s infinite;
}
#-moz-keyframes spin-faster { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Below see snippet where I added the 0% {} to each #keyframes definition. Your code did not work for me on macOS Safari (desktop) either when I initially tested it so I thought it may have been an issue with how the #keyframes animation was defined. See MDN docs for more info.
I used a placeholder image for the demo and tweaked the positioning so it was all in the viewport.
.img-sth {
position: absolute;
height: 80px;
top: 20px;
left: 20px;
-webkit-animation:spin-faster 4s linear 0.01s infinite;
-moz-animation:spin-faster 4s linear 0.01s infinite;
animation:spin-faster 4s linear 0.01s infinite;
}
#-moz-keyframes spin-faster {
0% {}
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin-faster {
0% {}
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin-faster {
0% {}
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
<img class="img-sth"src="https://via.placeholder.com/80x80">
I want to flip a coin with this 3 images, i want that each image could change when its rotating so user cant see the raw changing of each image.. i know that the solution could come with changing the percentages, but cant figure out
Conclusion: I want to "hide" when each coin changes.
This is the HTML and CSS
.coin {
height: 40px;
width: 40px;
animation: spin 18s ease infinite;
border-radius: 50%;
background-size: cover;
}
#keyframes spin {
0% {
-webkit-transform: rotateY(0deg);
background-image: url("https://i.ibb.co/w0M0NjP/3.png");
}
33.33% {
-webkit-transform: rotateY(360deg);
background-image: url("https://i.ibb.co/w0M0NjP/3.png");
}
33.34% {
-webkit-transform: rotateY(0deg);
background-image: url("https://i.ibb.co/n7k3p0X/2.png");
}
66.66% {
-webkit-transform: rotateY(360deg);
background-image: url("https://i.ibb.co/n7k3p0X/2.png");
}
66.67% {
-webkit-transform: rotateY(0deg);
background-image: url("https://i.ibb.co/gmzSqzG/1.png");
}
100% {
-webkit-transform: rotateY(360deg);
background-image: url("https://i.ibb.co/gmzSqzG/1.png");
}
}
<div class="coin"></div>
Consider 2 animations and it will be easier to handle. One for the rotation that will last Xs and the other for the image change that will last (3/2)*Xs with a delay of X/4s because you need to switch on the 90deg angle and 90deg=360deg/4
.coin {
height: 40px;
width: 40px;
animation:
spin 2s linear infinite,
change 3s infinite linear .5s;
border-radius: 50%;
background-size: cover;
}
#keyframes change {
0%,33.33% {
background-image: url("https://i.ibb.co/w0M0NjP/3.png");
}
33.34%,66.66% {
background-image: url("https://i.ibb.co/n7k3p0X/2.png");
}
66.67%,100% {
background-image: url("https://i.ibb.co/gmzSqzG/1.png");
}
}
#keyframes spin {
100% {
transform: rotateY(360deg);
}
}
<div class="coin"></div>
With a variable for better control
.coin {
--x:4s;
height: 40px;
width: 40px;
animation:
spin var(--x) linear infinite,
change calc(3*var(--x)/2) infinite linear calc(var(--x)/4);
border-radius: 50%;
background-size: cover;
}
#keyframes change {
0%,33.33% {
background-image: url("https://i.ibb.co/w0M0NjP/3.png");
}
33.34%,66.66% {
background-image: url("https://i.ibb.co/n7k3p0X/2.png");
}
66.67%,100% {
background-image: url("https://i.ibb.co/gmzSqzG/1.png");
}
}
#keyframes spin {
100% {
transform: rotateY(360deg);
}
}
<div class="coin"></div>
I'm trying to write move/scroll text.
So finally I have this.
CODEPEN
There is a problem as you can see. The problem with diplay in the same time two text inside p tags. I want to display the 1st one and then should be show the 2nd one.
I was trying to change values of this
#-moz-keyframes left-one {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes left-one {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes left-one {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
I mean 0% to 50% but it's not good.
How I can solve it?
The whole picture of the animation you want to show is 30s long, not 15s. Each individual animation is 15s on the screen, but the whole animation is 30s if you account for the time of the first animation + the time of the second animation, so they don't overlap.
So change the animation time of both to 30s, and do the first animation in the first 15s (0-50%), and do the second animation in the last 15s (50-100%)
.movetext {
width: 100%;
height: 50px;
overflow: hidden;
position: relative;
background-color: black;
}
.movetext p {
position: absolute;
font-family: Verdana, Arial;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
color: yellow;
font-weight: bold;
font-size: 20px;
transform: translateX(100%);
}
.movetext p:nth-child(1) {
animation: left-one 30s linear infinite;
}
.movetext p:nth-child(2) {
animation: left-two 30s linear infinite;
}
#keyframes left-one {
0% {
transform: translateX(100%);
}
50% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}
#keyframes left-two {
50% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
<div class="container">
<div class="movetext">
<p>Something is here.</p>
<p>But maybe something will be here.</P>
</div>
</div>
Thanks man. It's working very well. :)
I saw there is a little problem on mobile view. The all text is not display properly. It's just cut off. For the other resolutions (>768) everything is good.
So how about this. How I can handle it?
EDIT
I saw the problem. P tag set width of class. I know I can set witdh eg. 700px but I would like to p tag set width of width text.
I'm learning to use CSS to make some animations (start from zero). I saw this cool example on a website. I would like to apply this to my own CSS. However I'm thinking several changes to this
1) Can I change this by a timer. So it can flip automatically after a certain period (say flip every 10 seconds) without any mouse movement.
2) I have two <div> in my HTML file that I want to flip from one to anther. Unfortunately they have got the same class (Something like :widget-inner loadable .widget-size-2x1). So can I use #id (ID selector) instead of class selector in CSS file?
3) I saw other examples using an extra JS file to achieve the flipping animation. Ideally can I just use only CSS to do this?
I have a sample code below which only works partly. It doesn't show the first picture. Please guide on how to make the required changes.
#draggable {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#dashboard {
perspective: 1000;
}
#dashboard {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.loadable {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
animation: mymove 20s infinite;
}
#b {
display: block;
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
animation: mymove 20s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
40% {transform: rotateY(0deg);}
50% {transform: rotateY(180deg);}
90% {transform: rotateY(180deg);}
100% {transform: rotateY(0deg);}
}
<div id="draggable">
<div id="dashboard" class="shadow">
<div class="widget-inner loadable" id="a">
<img src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg"/>
</div>
<div class="widget-inner loadable" id="b">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
Based on the information provided in the question and your comments, it seems like the below snippet is what you require. This would keep flipping infinitely without the need for any mouse interactions to trigger the flip action. When the image is shown, the text will get hidden behind and vice-versa.
The changes that I have made are as follows:
Added transform to rotate the div which contains the image (#a) by -180deg on load because this has to initially look as though it is behind the div that contains the text (#b).
When we flip, we have to flip both #a and #b synchronously but in exactly opposing manner. That is, when #a is made to come forward by using rotateY(0deg), the #b has to go behind and hence at that point in time, it should have rotateY(180deg) and vice-versa. This cannot be achieved using a single animation and hence I have added a separate animation keyframe setting for the front and back sides of the flip.
#draggable {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#dashboard {
-webkit-perspective: 1000;
perspective: 1000;
}
#dashboard {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
transition: all 1.0s linear;
}
.loadable {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#a{
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: mymoveback 20s infinite;
animation: mymoveback 20s infinite;
}
#b {
display: block;
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
-webkit-animation: mymove 20s infinite;
animation: mymove 20s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
40% {
-webkit-transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(180deg);
}
90% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
#-webkit-keyframes mymoveback {
40% {
-webkit-transform: rotateY(-180deg);
}
50% {
-webkit-transform: rotateY(0deg);
}
90% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(-180deg);
}
}
#keyframes mymove {
40% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
90% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}
#keyframes mymoveback {
40% {
transform: rotateY(-180deg);
}
50% {
transform: rotateY(0deg);
}
90% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-180deg);
}
}
<div id="draggable">
<div id="dashboard" class="shadow">
<div class="widget-inner loadable" id="a">
<img src="http://lorempixel.com/450/281"/>
</div>
<div class="widget-inner loadable" id="b">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
Flip images to flip on some interval using setInterval method. Demo
$(function() {
setInterval(function() {
$('#f1_card').toggleClass("transformStyle transformRotate");
}, 3000)
})
Sure. you can use pseudo class :hover, and css property
transform: rotateY(180deg); for doing flipping you can control timing using animation and keyframes
Looking to build something like this - a spin the wheel - using only HTML and CSS, without Javascript
http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html
http://www.dougtesting.net/winwheel
Looking for some references or even to see if it can be done.
This is using the Hover effect of spinning. Since css doesn't have event handlers, you can't add/remove classes. However, you can add hover effects:
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
div:hover {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
Hover to see effect: <div>Spin</div>
If you could use a tiny bit of javascript, you could do something like this:
$('div').click(function(){
$(this).toggleClass("thisIsAdded");
});
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
.thisIsAdded {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to see:<div>spin</div>
Note:
The script here is purely toggling the class 'thisIsAdded'.
As Justinas pointed out We cant fire css style on click event. You need javascript for that. However you can use CSS animation to achieve the spin effect but only with pseudo-selectors.
below is a sample spin effect using only CSS
<style type="text/css">
.content
{
float:left;cursor:pointer;
}
.content::after
{
content:'>';float:right;margin:0 0 0 10px;
-moz-transition:0.5s all;-webkit-transition:0.5s all;
}
.content:hover::after
{
-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);
}
</style>
<body>
<div class="content">Sample</div>
</body>
Here you go.. Fiddle
CSS:
.circle {
border-radius: 50%;
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }