I'm trying to get the Top and Right values from an element being rotated by a CSS animation, for this I am using the following code:
HTML:
<div id="ball1"> </div>
CSS:
#keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#ball1 {
transform-origin: center right;
animation: spin 2.5s linear 0s infinite forwards;
position: relative;
background-color: #7883f7;
width: 10;
height: 10;
border-radius: 10px;
}
Javascript:
console.log(window.getComputedStyle(document.getElementById("ball1"), null).top);
console.log(window.getComputedStyle(document.getElementById("ball1"), null).right);
However it returns a value of 0px, I wanted to get the value from Right and Top as if I was manually setting them (and not by the transform animation).
If this is not possible, is there a way to simulate a "circle" rotation and return the right/top values without using the transform?
ie:
https://66.media.tumblr.com/fb22b61bcbca3785a515e86c2276451b/tumblr_inline_pmimnjEvbK1v6q8wn_1280.gif?fbclid=IwAR2zjgE0hfB8emWOg0f6TOcQb8DWGbEvu9IQOr92fMq4HmMKjiAQRQzLmI0
Use getBoundingClientRect():
const ball = document.getElementById("ball");
setInterval(() => {
const rect = ball.getBoundingClientRect();
console.log(rect.top, rect.right);
}, 300);
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#ball {
transform-origin: center right;
animation: spin 2.5s linear 0s infinite forwards;
position: relative;
background-color: #7883f7;
width: 10px;
height: 10px;
border-radius: 10px;
}
<div id="ball"></div>
Here is an approximation using top/left. The trick is to animate each property individually alternating the ease function to simulate the circular path:
.box {
width:100px;
height:100px;
position:relative;
}
#ball1 {
animation:
Atop 2.5s infinite,
Aleft 2.5s infinite;
position: absolute;
background-color: #7883f7;
width: 10px;
height: 10px;
border-radius: 10px;
}
#keyframes Atop {
0%,50%,100% {
top:50%;
animation-timing-function: ease-out;
}
25% {
top:0%;
animation-timing-function: ease-in;
}
75% {
top:100%;
animation-timing-function: ease-in;
}
}
#keyframes Aleft {
0%,100% {
left:0;
animation-timing-function: ease-in;
}
25%,75% {
left:50%;
animation-timing-function: ease-out;
}
50% {
left:100%;
animation-timing-function: ease-in;
}
}
<div class="box">
<div id="ball1"> </div>
</div>
Related
I am struggling at this moment with css animations.
The problem is that I have an entrypoint div that have his own scale animation, and another div that expands and show up a text, and after few seconds collapses again (I've already achieved this).
The main problem becomes when is a requirement to do all this again when the user hovers the entrypoint, when this occurs we have 2 steps.
Hover and show the text again.
When the mouse leaves, collapse the text again after few seconds.
This is my code https://codepen.io/Arm144/pen/JjRWoXQ
HTML:
<div id="chatbotEntryPoint">
<i>
<img class="entry_point_icon" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjJweCIgaGVpZ2h0PSI2MnB4IiB2aWV3Qm94PSIwIDAgNjIgNjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDY0ICg5MzUzNykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+RW50cnktcG9pbnQtcm91bmRAM3g8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8Y2lyY2xlIGlkPSJwYXRoLTEiIGN4PSIyOCIgY3k9IjI4IiByPSIyOCI+PC9jaXJjbGU+CiAgICAgICAgPGZpbHRlciB4PSItOS44JSIgeT0iLTYuMiUiIHdpZHRoPSIxMTkuNiUiIGhlaWdodD0iMTE5LjYlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjIiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEuNSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC40NjI3NDUwOTggICAwIDAgMCAwIDAuNDYyNzQ1MDk4ICAgMCAwIDAgMCAwLjQ2Mjc0NTA5OCAgMCAwIDAgMC43IDAiIHR5cGU9Im1hdHJpeCIgaW49InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSI1Li0tRW50cnktUG9pbnQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJ3ZWJfRW50cnlQb2ludC0vY29tcHJlc3NlZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEzNDkuMDAwMDAwLCAtNTg2LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iRW50cnktcG9pbnQtcm91bmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzNTIuMDAwMDAwLCA1ODcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iT3ZhbC1Db3B5LTMiPgogICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0yKSIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSIjMUJCM0JDIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTM1Ljk2NDg0MzcsMTkgTDIwLjAzODQxMTUsMTkgQzE3LjgxMTg0ODksMTkgMTYsMjAuNzgyODk3OSAxNiwyMi45NzQ2NzA0IEwxNiwzMi4wODc4Mjk2IEMxNiwzNC4yNjY3ODQ2IDE3Ljc5MTAxNTYsMzYuMDQxOTkyMiAyMCwzNi4wNjI1IEwyMCwzOS4zNDM3NSBDMjAsMzkuNjA5MDY5OCAyMC4xNjIxMDkzLDM5Ljg0ODc1NDkgMjAuNDExNDU4NCwzOS45NTAwMTIzIEMyMC40OTQxNDA3LDM5Ljk4MzMzNzQgMjAuNTgwNzI5Miw0MCAyMC42NjY2NjY3LDQwIEMyMC44Mzk4NDM3LDQwIDIxLjAxMDQxNjcsMzkuOTMzMzQ5NyAyMS4xMzgwMjA4LDM5LjgwNzczOTIgTDI0Ljk0MjcwODMsMzYuMDYyNSBMMzUuOTYxNTg4NSwzNi4wNjI1IEMzOC4xODgxNTExLDM2LjA2MjUgNDAsMzQuMjc5NjAyMSA0MCwzMi4wODc4Mjk2IEw0MCwyMi45NzIxMDcgQzQwLDIwLjc4MTYxNjIgMzguMTkwMTA0MSwxOSAzNS45NjQ4NDM3LDE5IFogTTM4LjY2NjY2NjcsMzIuMDg3ODI5NiBDMzguNjY2NjY2NywzMy41NTU0MiAzNy40NTMxMjUxLDM0Ljc1IDM1Ljk2MTU4ODUsMzQuNzUgTDI0LjY2NjY2NjcsMzQuNzUgQzI0LjQ4OTU4MzMsMzQuNzUgMjQuMzIwMzEyNSwzNC44MTkyMTM5IDI0LjE5NTMxMjUsMzQuOTQyMjYwOCBMMjEuMzMzMzMzMywzNy43NTk1MjE2IEwyMS4zMzMzMzMzLDM1LjQwNjI1IEMyMS4zMzMzMzMzLDM1LjA0MzUxODEgMjEuMDM1MTU2MywzNC43NSAyMC42NjY2NjY3LDM0Ljc1IEwyMC4wMzg0MTE1LDM0Ljc1IEMxOC41NDY4NzQ5LDM0Ljc1IDE3LjMzMzMzMzMsMzMuNTU1NDIgMTcuMzMzMzMzMywzMi4wODc4Mjk2IEwxNy4zMzMzMzMzLDIyLjk3NDY3MDQgQzE3LjMzMzMzMzMsMjEuNTA3MDggMTguNTQ2ODc0OSwyMC4zMTI1IDIwLjAzODQxMTUsMjAuMzEyNSBMMzUuOTY0ODQzNywyMC4zMTI1IEMzNy40NTQ0MjcxLDIwLjMxMjUgMzguNjY2NjY2NywyMS41MDU3OTg0IDM4LjY2NjY2NjcsMjIuOTcyMTA3IEwzOC42NjY2NjY3LDMyLjA4NzgyOTYgWiIgaWQ9IlNoYXBlLUNvcHktMyIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" />
</i>
<span class="entry_point_text">Some text to show</span>
</div>
SCSS:
#chatbotEntryPoint {
display: block;
position: fixed;
width: 60px;
height: 60px;
z-index: 1200;
border-radius: 50px;
background-color: purple;
cursor: pointer;
line-height: 1.4;
i {
float: right;
display: block;
.entry_point_icon {
width: 60px;
height: 60px;
}
}
.entry_point_text {
color: #fff;
font-size: 15px;
padding: 20px;
width: 300px;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
&.reveal_text{
animation: text_expand .3s linear .5s forwards,
text_expand .3s linear 3s reverse forwards;
.entry_point_icon {
animation: reveal .2s linear forwards, reveal_resize .2s linear 1s reverse forwards, reveal_resize .2s linear 3s forwards;
}
}
&.reveal_text_hover{
animation: text_expand .3s linear .5s forwards;
.entry_point_icon {
animation: reveal_resize .2s linear 1s reverse forwards;
}
}
&.reveal_text_leave{
animation: text_expand .3s linear .5s reverse forwards;
.entry_point_icon {
animation: reveal_resize .2s linear 3s forwards;
}
.entry_point_text {
opacity: 1;
}
}
}
#keyframes reveal {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes text_expand {
0% {
width: 60px;
}
100% {
width: 400px;
}
}
#keyframes reveal_resize {
0% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
JS
var initEntryPoint = function(){
var entryPoint = document.getElementById('chatbotEntryPoint');
entryPoint.classList.add('reveal_text');
entryPoint.addEventListener('mouseenter', function(){
if( entryPoint.classList.contains('reveal_text')){
entryPoint.classList.remove('reveal_text');
} else {
entryPoint.classList.remove('reveal_text_leave');
}
setTimeout(function(){
entryPoint.classList.add('reveal_text_hover');
},10);
});
entryPoint.addEventListener('mouseleave', function(){
setTimeout(function(){
entryPoint.classList.remove('reveal_text_hover');
entryPoint.classList.add('reveal_text_leave');
}, 3000);
});
};
setTimeout(function(){
initEntryPoint();
}, 1000);
If anyone has any clue about how to make the text collapse again smoothly, and when hover again redo all this, I would really apreciate it.
Thank you so much for your time.
Google's Material Design spinners shring and stretch while rotating:
I have found the following SVG spinner which implements it pretty well here: https://codepen.io/svnt/pen/qraaRN.
HTML:
<svg class="spinner" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle></svg>
CSS:
/* SVG spinner icon animation */
.spinner {
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
}
.spinner .path {
stroke: #cccccc;
stroke-linecap: round;
-webkit-animation: dash 1.5s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
The thing is, the #keyframes animation uses stroke-dasharray and stroke-dashoffset which seem to run on the main UI thread as if I do some tasks with JavaScript while the animation is running, the spinner looses its smoothness and becomes jerky.
The rotation (via transform) works pretty well, and I know it runs off the UI thread, so even if I perform some JS task the rotation will be smooth while animating.
Of course, I can just implement a rotating spinner without the stretch/shrink stuff, but I was wondering if someone of you knows how to make such animations always look smooth. Is there a way to stretch and shrink the spinner using transform while it rotates?
Hope I was clear. Thanks for the attention!
You can simulate this using different elements where the idea is to hide the first one using the other. The only drawback is the transparency.
Here is an example where you can adjust the different values to get the needed animation. Used CSS variable for simplicity but it's not mandatory.
.loading {
width:50px;
height:50px;
position:fixed;
top:calc(50% - 25px);
left:calc(50% - 25px);
border-radius:50%;
border:5px solid blue;
animation:load 2s linear infinite;
}
.loading:before,
.loading:after,
.loading span:before,
.loading span:after{
content:"";
position:absolute;
top:-6px;
left:-6px;
right:-6px;
bottom:-6px;
border-radius:50%;
border:7px solid transparent;
border-left-color:white;
animation:hide 1.2s infinite;
}
.loading span:before {
--r:90deg;
}
.loading span:after {
--r:180deg;
}
.loading:before {
--r:260deg; /* a little less than 270deg to keep some border visible */
}
#keyframes load {
to {
transform:rotate(360deg);
}
}
#keyframes hide {
50% {
transform:rotate(var(--r,0deg));
}
100% {
transform:rotate(360deg);
}
}
<div class="loading">
<span></span>
</div>
With transparency you can create the border using 4 elements that you rotate to make them above each other and shrink the overal shape. Basically the opposite logic of the first code (we change what was blue with transparent and what was white with blue)
The only drawback is that you cannot shrink less that the length of one side
.loading {
width:50px;
height:50px;
position:fixed;
top:calc(50% - 25px);
left:calc(50% - 25px);
animation:load 2s linear infinite;
}
.loading:before,
.loading:after,
.loading span:before,
.loading span:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border-radius:50%;
border:5px solid transparent;
border-left-color:blue;
animation:hide 1.2s infinite;
}
.loading span:before {
--r:90deg;
}
.loading span:after {
--r:180deg;
}
.loading:before {
--r:200deg;
}
#keyframes load {
to {
transform:rotate(360deg);
}
}
#keyframes hide {
50% {
transform:rotate(var(--r,0deg));
}
100% {
transform:rotate(360deg);
}
}
body {
background:linear-gradient(to right,pink,orange);
}
<div class="loading">
<span></span>
</div>
To better understand what is happening in both codes, remove the main rotation and use different color for borders
.loading {
width:50px;
height:50px;
position:fixed;
top:calc(50% - 25px);
left:calc(50% - 25px);
/* animation:load 2s linear infinite;*/
}
.loading:before,
.loading:after,
.loading span:before,
.loading span:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-0;
border-radius:50%;
border:5px solid transparent;
border-left-color:blue;
animation:hide 4s infinite;
}
.loading span:before {
--r:90deg;
border-left-color:red;
}
.loading span:after {
--r:180deg;
border-left-color:green;
}
.loading:before {
--r:260deg;
border-left-color:yellow;
}
#keyframes load {
to {
transform:rotate(360deg);
}
}
#keyframes hide {
50% {
transform:rotate(var(--r,0deg));
}
100% {
transform:rotate(360deg);
}
}
body {
background:linear-gradient(to right,pink,orange);
}
<div class="loading">
<span></span>
</div>
I have a spaceship object in my website that moves to left to right(end to the view port) in the screen.
I need to show another spaceship object moves right to left once that above mentioned spaceship object reach to end(screen view port).
The problem
I tried to give second spaceship object "animation delay" but it's not working as I wanted. Because browser width different from screen to screen.
Here is my code.
.spaceship-1 img {
width: 100px;
animation: spaceship-1 10s ease-in-out 1;
animation-fill-mode: forwards;
}
#-webkit-keyframes spaceship-1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100vw);
}
}
.spaceship-2 img {
width: 100px;
animation: spaceship-2 10s ease-in-out 1;
animation-fill-mode: forwards;
animation-delay: 5s;
position: absolute;
right: 0;
bottom: 15px;
}
#-webkit-keyframes spaceship-2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100vw);
}
}
<div class="spaceship-1">
<img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>
<div class="spaceship-2">
<img src="http://i68.tinypic.com/2lsxjpx.png" alt="">
</div>
Here is the Jsfiddle Any ideas?
If you want the second animation to start right after the first one, you have to set an animation-delay equal to the animation-duration of the first one, witch is 10s.
And also you should make both of them absolute.
body{
background:#f6f6f6;
overflow-x:hidden;
}
.spaceship-1 img{
width:100px;
animation: spaceship-1 10s ease-in-out 1 ;
animation-fill-mode: forwards;
position:absolute;
left: 0;
top: 10px;
}
#-webkit-keyframes spaceship-1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(100vw - 100px)) ;
}
}
.spaceship-2 img{
width:100px;
animation: spaceship-2 10s ease-in-out 1 ;
animation-fill-mode: forwards;
animation-delay:10s;
position:absolute;
transform: rotate(180deg);
right: 0;
bottom: 10px;
}
#-webkit-keyframes spaceship-2 {
0% {
transform: translateX(0) rotate(180deg);
}
100% {
transform: translateX(calc(-100vw + 100px)) rotate(180deg);
}
}
<div class="spaceship-1">
<img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>
<div class="spaceship-2">
<img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>
The fiddle : https://jsfiddle.net/sph8f6ty/
I have a text and block in an animation of an SVG element.
Here in my example i simplified everything.
I want to have one initial animation and afterwards a hover animation on the block element. The initial animation is fine as it is. (use chrome to have equals measurements). But after the initial animation the user should be able to hover the block and the block itself should resize (which is also working already) and the text should get an opacity of 1. But this won't work since the opacity is already set by the keyframe animation.
Any suggestions on how to work around on this one?
I don't mind if i use JS or CSS or any frameworks. I don't rely on CSS animations. Just used them because i thought i'd be cleaner.
Important Edit: I forgot a simple but very important thing. Before the animation there are some other animations on different elements. So i have a delay of let's say 2 seconds. Before the animation starts, the opacity should be 0 so the text is not visible until the animation starts. Sorry, forgot about that!
.text{
font-weight: bold;
opacity: 0;
transition: all .8s;
animation: showText 3s ease-in-out forwards;
animation-delay: 2s;
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
animation-delay: 2s;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text'>
Foo Bar!
</div>
<div class='block'>
</div>
codepen.io link (same code as above): https://codepen.io/jdickel/pen/xJbQrY
Instead of a forwards animation, you can simply set the initial opacity to 0.3.
EDIT:
I'm fairly confident that forwards animation styles can't be easily overridden (though I'm unable to find it in documentation for some reason), so you could do similarly to what was originally suggested and just extend the time of the animation like so:
.text{
font-weight: bold;
/* Start out at 0.3 */
opacity: 0.3;
transition: all .8s;
/* 2s + 3s = 5s */
animation: showText 5s ease-in-out; /* no forwards */
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
/* Note the new animation keyframe locations */
70% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text'>
Foo Bar!
</div>
<div class='block'>
</div>
First, you need to remove forwards from the .text animation. You can use Javascript's mouseenter and mouseleave events to set the text's opacity when .block is hovered over.
.text{
font-weight: bold;
opacity: 0;
transition: all .8s;
animation: showText 3s ease-in-out;
animation-delay: 2s;
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
animation-delay: 2s;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text' id="text" onmouseenter="function1()" onmouseleave="function2()">
Foo Bar!
</div>
<div class='block' onmouseenter="function1()" onmouseleave="function2()">
</div>
<script>
setTimeout(function(){
document.getElementById("text").style.opacity = "0.3";
}, 3000)
function function1(){
document.getElementById("text").style.opacity = "1";
}
function function2(){
document.getElementById("text").style.opacity = "0.3";
}
</script>
I need to have a growing and decreasing circle in made in javascript.
My idea is to use a div with
border-radius : 50%
To get a circle. I need to make it scale from 0.2 to 1 every [x] seconds .
Like It grows from 0.2 to 1 in 5 seconds, then it decreases from 1 to 0.2 in5 seconds too. THen the movement starts again.
I think i have to use sin or cos functions but i don't know how to get this interval depending on time.
I need it to be coupled with a javascript timing function, so that when i satr a timer, the animation begins, and when I pause it it pauses the animation.
Thanks for advice !
One more example of CSS animation which probably better option then javascript:
.circle {
background: coral;
height: 100px;
width: 100px;
border-radius: 50%;
-webkit-animation: pulse 1s ease infinite alternate;
animation: pulse 1s ease infinite alternate;
}
#-webkit-keyframes pulse {
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(.2);
}
}
<div class="circle"></div>
For Firefox you will need to add prefixless rule
#keyframes pulse {
from { transform: scale(1); }
to { transform: scale(.2); }
}
You could do this with CSS3 animations. Look at this example and change it until it does exactly how you want it.
#circle {
-webkit-animation: oscillate 10s infinite;
animation: oscillate 10s infinite;
border: 1px solid black;
height: 100px;
width: 100px;
}
#-webkit-keyframes oscillate {
0% { border-radius: 20%; }
50% { border-radius: 100%; }
100% { border-radius: 20%; }
}
#keyframes oscillate {
0% { border-radius: 20%; }
50% { border-radius: 100%; }
100% { border-radius: 20%; }
}
<div id="circle">Hi</div>
Use a CSS3 animation set on infinite. Check this fiddle.
#-webkit-keyframes mymove {
0%, 100% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(0.2); }
}
#keyframes mymove {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.2); }
}
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
border-radius:60px;
}