I'd like the border to rotate on a circular DIV with the background photo
This is an icon in maplibre-gl
The code below rotates but:
the position of the icon has changed to the top left corner of the browser (if I turn off the animation, the location is correct)
the photo also rotates (it should stand still)
Code:
.userLocation {
height: 100px;
width: 100px;
background-image: url('#Model.LogoPath');
background-size: contain;
cursor: pointer;
}
.borderAnimation {
border-radius: 100px;
-webkit-animation: rotate 20s linear infinite; /* Chrome, Safari 5 */
-moz-animation: rotate 20s linear infinite; /* Firefox 5-15 */
-o-animation: rotate 20s linear infinite; /* Opera 12+ */
animation: rotate 20s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
border: 4px dashed #32A3F0;
}
#-webkit-keyframes rotate {
from {
transform-origin: center center;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform-origin: center center;
transform: translateX(360deg);
-webkit-transform: rotate(360deg);
}
}
Related
I found this SOLUTION but how would I add one more
like this?
.saturn {
position: absolute;
left: 315px;
top: 143px;
-webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
-moz-animation: myOrbit 4s linear infinite; /* Firefox 5-15 */
-o-animation: myOrbit 4s linear infinite; /* Opera 12+ */
animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}
#keyframes myOrbit {
from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
.animation_delay_1{
animation-delay: 3s;
}
<div class="logo_carousel">
<img id="logo_center"src="logo.png">
<img class="saturn" src="logo1.png">
<img class="saturn animation_delay_1" src="logo2.png">
</div>
I tried to add animation-delay, But this is not quite what I need. The logo just starts spinning later, but I need it to spin immediately but from a different position.
.saturn {
position: absolute;
left: 315px;
top: 143px;
-webkit-animation: myOrbit 4s linear infinite;
/* Chrome, Safari 5 */
-moz-animation: myOrbit 4s linear infinite;
/* Firefox 5-15 */
-o-animation: myOrbit 4s linear infinite;
/* Opera 12+ */
animation: myOrbit 4s linear infinite;
/* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}
#keyframes myOrbit {
from {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
.animation_delay_1 {
animation-delay: 0.5s;
}
.animation_delay_3 {
animation-delay: 0s;
}
<div class="logo_carousel">
<img id="logo_center" src="https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1">
<img class="saturn animation_delay_1" src="https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1">
<img class="saturn animation_delay_2" src="https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1">
<img class="saturn animation_delay_1" src="https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1">
</div>
You would add another image with a new animation class:
<img class="saturn animation_delay_3" src="logo2.png">
Then add a new animation CSS with a new delay such as 4s.
.animation_delay_3{
animation-delay: 4s;
}
Results: https://codepen.io/MistaPrime/pen/YzzXeNJ
'How can I' add a quick fade in and out to a CSS animation?
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
#-webkit-keyframes my-animation {
0%,
49% {
background-color: white;
}
50%,
100% {
background-color: #8b72da;
}
<li class="section-1"></li>
Any help would be great, cheers
I think this is what you're looking for. I increased the duration of the animation to make the fade more apparent. Basically you have to play with the percentage values in the animation, so the transition from white to the other color doesn't happen within 1% of the animation duration:
.section-flash-ul {
list-style: none;
width: 100%;
display: inline-block;
padding: 0;
margin: 0;
}
.section-flash-item {
border: 1px solid black;
width: 33.333%;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
.section-1 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 2.3s infinite; /* IE 10+, Fx 29+ */
}
#-webkit-keyframes NAME-YOUR-ANIMATION {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #8b72da;
}
}
.section-2 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* IE 10+, Fx 29+ */
}
#-webkit-keyframes NAME-YOUR-ANIMATION2 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #9d89de;
}
}
.section-3 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* IE 10+, Fx 29+ */
}
#-webkit-keyframes NAME-YOUR-ANIMATION3 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #b5a8e0;
}
}
<ul class="section-flash-ul">
<li class="section-flash-item section-1"></li>
<li class="section-flash-item section-2"></li>
<li class="section-flash-item section-2"></li>
</ul>
<div class="quadrat">
</div>
Seems like you need three animation positions instead of two:
animation: my-animation 1.3s infinite;
#-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}
100% {
background-color: white;
}
Notice, in your example, you had css holding the background at white from 0 to 49%, and then the solid color from 50% to 100%. If you want smoother effects, give css more time between these states to perform the transition.
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
#-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}
<li class="section-1"></li>
I don't know where do you find that approach of using keyframes but from 0% to 50% would be enough.
I'm trying to have a scrolling marquee of sorts across the top of my webpage. I'm not using the tag as it is not supported by Safari. However, even with using CSS Animation, it doesn't seem to work for Safari either. Here's my code:
<h3>Upcoming Shows:...</h3>
This is what I have in my style sheet:
h3 {
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: example1 15s linear infinite;
-webkit-animation: example1 15s linear infinite;
animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes example1 {
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 have this code which is rotating the hr (a line) from middle, i want to rotate that Line from it's bottom
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
width: 50px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
50% {-webkit-transform: rotate(180deg);}
}
/* Standard syntax */
#keyframes mymove {
50% {transform: rotate(180deg);}
}
</style>
</head>
<body>
<p>Gradually rotate the DIV element 180 degrees, and back:<p>
<div id="myDIV">
<hr>
</div>
how to rotate a line or an image from its bottom just like a Dial whose niddle do rotate
You can try it.
#myDIV {
margin: auto;
width: 50px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
transform-origin: top left;
}
#-webkit-keyframes mymove {
50% {-webkit-transform: rotate(180deg);}
}
#keyframes mymove {
50% {transform: rotate(180deg);}
}
and change transform-origin value according your need, it can be numeric.
Following code implements a marquee like animation that is working just on firefox. It is not working in chrome. What could be the reason for this ? Here is the jsfiddle that will show up only in the firefox.
CSS :
/* define the animation */
#-webkit-keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
#-moz-keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
/* define your limiting container */
.marquee {
border: solid 2px;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
/* this is the tray moving around your container */
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
animation-play-state: paused
}
HTML :
<p class="marquee">
<span>
Hey ! What's up?
</span>
</p>
Debugging in chrome highlights this :
Haven't got Chrome installed currently, but remember to prefix -webkit to all CSS3 functions for compatibility.
#-webkit-keyframes marquee {
0% { -webkit-transform: translate(0, 0); }
100% { -webkit-transform: translate(-100%, 0); }
}
EDIT: For the error you added, utilise the above.
/* this is the tray moving around your container */
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 15s linear infinite; /* here you select the animation */
-webkit-animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
Try adding the -webkit- prefix to make it work in webkit browsers. Reference
/* this is the tray moving around your container */
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
-webkit-animation: marquee 15s linear infinite; /* Chrome, Safari, Opera */
animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
-webkit-animation-play-state: paused /* Chrome, Safari, Opera */
animation-play-state: paused
}
As pointed out by James Hunt, you might need to prefix the "transform" attribute with -webkit- aswell.
in the "marque span" css definition, add the -webkit- prefix to the animation attribute do it will work in chrome and safari