im trying to apply "shock" animation for image at my website. The problem is that script extends the width so i can see the bottom bar of my browser :
HTML :
<div class="wrapper">
<article class="top-logo">
<h1>
<img src="img/logo.png" alt="robbie-logo">
</h1>
</article>
CSS:
.top-logo {
position: relative;
float: right;
}
.top-logo img {
height: 150px;
width: 350px;
-webkit-transform-style: preserve-3d;
}
.top-logo:hover {
animation-name: diagonal-slide;
animation-duration: 0.05s;
animation-iteration-count: 10;
animation-fill-mode: forwards;
}
#-webkit-keyframes diagonal-slide {
from { top: 0; left: 0; animation-timing-function: linear; }
20% { top: -5px; left: -5px; animation-timing-function: linear; }
40% { top: 5px; left: -5px; animation-timing-function: linear; }
60% { top: 5px; left: 5px; animation-timing-function: linear; }
80% { top: -5px; left: 5px; animation-timing-function: linear; }
to { top: 0; left: 0; animation-timing-function: linear; }
}
It doesn't happen here (no scroll bars), but still, try to add this to the container:
.wrapper {
overflow: hidden;
}
.wrapper {
overflow: hidden;
}
.top-logo {
position: relative;
float: right;
}
.top-logo img {
height: 150px;
width: 350px;
-webkit-transform-style: preserve-3d;
}
.top-logo:hover {
animation-name: diagonal-slide;
animation-duration: 0.05s;
animation-iteration-count: 10;
animation-fill-mode: forwards;
}
#-webkit-keyframes diagonal-slide {
from {
top: 0;
left: 0;
animation-timing-function: linear;
}
20% {
top: -5px;
left: -5px;
animation-timing-function: linear;
}
40% {
top: 5px;
left: -5px;
animation-timing-function: linear;
}
60% {
top: 5px;
left: 5px;
animation-timing-function: linear;
}
80% {
top: -5px;
left: 5px;
animation-timing-function: linear;
}
to {
top: 0;
left: 0;
animation-timing-function: linear;
}
}
<div class="wrapper">
<article class="top-logo">
<h1>
<img src="http://placehold.it/100x60/fa0" alt="robbie-logo">
</h1>
</article>
</div>
Related
I want to show an animation of drawing an angled and straight line and to show my text from left to right when hovering over a button and I am fairly new at this. also is there a way for my text to stay and not go away after animation finishes?
Here is my code, the code is a combination of other answers from stack overflow.
.skew {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
animation: draw 0.5s linear;
animation-fill-mode: forwards;
}
.line {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(45deg);
animation: drawLine 0.7s linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.showText {
animation: showText 2s;
position: relative;
top: -17px;
left: 15px;
opacity: 0;
}
#keyframes showText {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
#keyframes drawLine {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div>
<button class="menubtn">hover over me</button>
</div>
<div class="skew">
<div class="line">
<div class="showText">menu item</div>
</div>
</div>
You need to add/toggle a class on the div.skew element with Javascript, and define animation rules on that class or children of elements with that class, like so:
var button = document.querySelector("button.menubtn"); //Select the button
var skewElement = document.querySelector("div.skew"); //Select the 'skew' element
button.onmouseover = function(){
skewElement.classList.toggle("startAnimation");
}
.skew {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
}
.skew.startAnimation {
animation: draw 0.5s linear;
animation-fill-mode: forwards;
}
.line {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(45deg);
}
.startAnimation .line {
animation: drawLine 0.7s linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.showText {
opacity: 0;
position: relative;
top: -17px;
left: 15px;
}
.startAnimation .showText {
animation: showText 2s;
animation-fill-mode: forwards;
}
#keyframes showText {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
#keyframes drawLine {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div>
<button class="menubtn">hover over me</button>
</div>
<div class="skew">
<div class="line">
<div class="showText">menu item</div>
</div>
</div>
In order to have the text visible even after animation's end, you have to specify animation-fill-mode: forwards on .showText, like I have done in the snippet above.
To get the animation done on hovering, first we have to create an event for hovering for that particular element using javascript
Then call a function when that event is triggered , for you it will be displaying some animations
Just for simplicity , i just made a parent div for your entire animation elements , and not displaying initially
Later on hovering , we change the css display property of that parent element to block which will display all of your animated elements
Also to make sure your text stays after animation , there is an animation property called forwards which will keep your final animation state for the later time
var hvrbtn=document.getElementById("hvrbtn");
hvrbtn.onmouseover=()=>{
var anim=document.getElementById("anim");
anim.style.display="block";
};
.animated{
display:none;
}
.skew {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
animation: draw 0.5s linear;
animation-fill-mode: forwards;
}
.line {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(45deg);
animation: drawLine 0.7s linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.showText {
animation: showText 2s forwards;
position: relative;
top: -17px;
left: 15px;
opacity: 0;
}
#keyframes showText {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
#keyframes drawLine {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div>
<button class="menubtn" id="hvrbtn">hover over me</button>
</div>
<div class="animated" id="anim">
<div class="skew">
<div class="line">
<div class="showText">menu item</div>
</div>
</div>
<div>
I am trying to experiment with CSS Animation and made a simple page transition effect using only Css animation. The problem is when the animation completes, a slight flicker is created. Can you guys suggest some thing to fix this?
Codepen link- https://codepen.io/jake2917/pen/qyzxva?editors=1100
Here is the code.
The problem start when i try to center the h1 tag.
body {
margin: 0;
padding: 0;
}
#line {
border: 0.5px solid #130f40;
opacity: 0;
width: 0;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
display: block;
top: 50%;
animation-name: run;
animation-duration: 1s;
transition: 0.1s ease-in;
}
#container1 {
width: 100%;
opacity: 0;
background-color: #ff7979;
position: absolute;
top: -110%;
transition: 0.2s ease-in;
animation-name: cover1;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#container2 {
width: 100%;
opacity: 0;
background-color: #ff7979;
position: absolute;
bottom: -110%;
transition: 0.2s ease-in;
animation-name: cover2;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes run {
from {
width: 0;
opacity: 0;
}
to {
width: 99%;
opacity: 1;
}
}
#keyframes cover1 {
0% {
top: -10%;
opacity: 0;
height: 0;
}
100% {
top: 0%;
opacity: 1;
height: 50vh;
}
}
#keyframes cover2 {
0% {
bottom: -110%;
opacity: 0;
height: 0;
}
100% {
bottom: 0%;
opacity: 1;
height: 50vh;
}
}
// ADDING THIS LINE MAKE IT FLICKER
#container1 h1 {
text-align: center;
}
<div id="line"></div>
<div id="container1">
<h1>hello there</h1>
</div>
<div id="container2">
<h1>hello there</h1>
</div>
It is flickering left right because you have a content that is more than 100% of the body, html.
In many browsers they are adding a scroll bar and it pushed the content to the left.
What you need to do is to add a simple css code overflow: hidden. This way the content will be hidden, the body remains 100% height and the browser won't add scrollbar;
body {
overflow:hidden;
}
I wanted to make an image of arrow moving so that readers know they can scroll down to read more content. I tried to do that with the animation in CSS but it didn't work.
section.scrollDownContainer {
width: 100%;
position: absolute;
top: 65px;
}
section.scrollDownContainer img {
display: block;
box-shadow: 5px 5px 5px #333333;
margin: auto;
-webkit-animation: arrowmove 0.5s forwards;
-moz-animation: arrowmove 0.5s forwards;
-ms-animation: arrowmove 0.5s forwards;
-o-animation: arrowmove 0.5s forwards;
animation: arrowmove 0.5s forwards;
}
#-webkit-keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
#-moz-keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
#-ms-keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
#-o-keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
#keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
<section class="scrollDownContainer">
<img src="./image/arrow.png">
</section>
Can anyone tell me why? Thank you.
You can use transform: translateY(...) in keyframes
section.scrollDownContainer {
width: 100%;
position: absolute;
top: 65px;
}
section.scrollDownContainer img {
display: block;
margin: auto;
animation: arrowmove 0.5s infinite;
}
#keyframes arrowmove {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(50%);
}
100% {
transform: translateY(0%);
}
}
<section class="scrollDownContainer">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png" width="50px" height="50px">
</section>
The left: and top: properties of the animation will have no effect on your image because the image CSS does not contain a position property.
Add position: relative; or position: absolute; to the CSS for the image...
section.scrollDownContainer img {
position: relative; /* <------------------- added */
display: block;
box-shadow: 5px 5px 5px #333333;
margin: auto;
-webkit-animation: arrowmove 0.5s forwards;
-moz-animation: arrowmove 0.5s forwards;
-ms-animation: arrowmove 0.5s forwards;
-o-animation: arrowmove 0.5s forwards;
animation: arrowmove 0.5s forwards;
}
The animation should then function.
Using left:, right:, top:, or bottom: in CSS requires the element to also have a position property.
So I'm trying to somehow do two animations on one element but I can't be able to fix it.
Here is a jsfiddle which includes only the important things. For the full picture, check here. I want to make the alien which represents the letter L coming in from the right to left (= the position where he is now at).
So what I want to get is that the alien moves from right to left, but together with the moving legs, and the image of the alien.
I will explain some of the code.
HTML:
<div class="letter_L">
<div class="monster_L">
<img src="http://googledoodle.lucasdebelder.be/images/l/monster.png">
</div>
<div class="benen_L">
<div class="B_1"></div>
<div class="B_2"></div>
<div class="B_1 B_3"></div>
<div class="B_2 B_4"></div>
</div>
</div>
.monster_L represents the image of the alien
.Benen_L represents the legs (=benen)
CSS
/*Monster L*/
.monster_L img {
position: absolute;
bottom: 296px;
left: 596px;
z-index: 50;
opacity: 1;
width: 70px;
}
/*Been1*/
.B_1 {
position: absolute;
bottom: 293px;
left: 597px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_1;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been2*/
.B_2 {
position: absolute;
bottom: 286px;
left: 605px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_2;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been3*/
.B_3 {
left: 613px;
}
/*Been4*/
.B_4 {
left: 621px;
}
#keyframes animation_B_1 {
0%{ bottom: 293px; }
50% { bottom: 286px; }
100%{ bottom: 293px; }
}
#keyframes animation_B_2 {
0%{ bottom: 286px; }
50% { bottom: 293px; }
100%{ bottom: 286px; }
}
You have to apply position: absolute to letter_L and apply a keyframe to it for its translation with the right property.
However when you apply position: absolute or position: relative to letter_L, all position: absolute elements inside are not going to be relative to letter_L. So you have change the top, bottom, left coordinates accordingly.
I have tried to solve this for you.
Check updated fiddle.
Refer code:
.letter_L {
width: 100px;
position: absolute;
/* z-index: 100000000; */
height: 90px;
animation-name: moveRTL;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Monster L*/
.monster_L img {
position: absolute;
top: 0;
left: 0;
z-index: 50;
opacity: 1;
width: 70px;
}
/*Been1*/
.B_1 {
position: absolute;
top: 32px;
left: 0;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_1;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been2*/
.B_2 {
position: absolute;
top: 32px;
left: 8px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_2;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been3*/
.B_3 {
left: 16px;
}
/*Been4*/
.B_4 {
left: 24px;
}
#keyframes animation_B_1 {
0% {
top: 28px;
}
50% {
top: 32px;
}
100% {
top: 28px;
}
}
#keyframes animation_B_2 {
0% {
top: 32px;
}
50% {
top: 28px;
}
100% {
top: 32px;
}
}
#keyframes moveRTL {
0% {
right: 0;
}
100% {
right: 200px;
}
}
<!-- L letter -->
<div class="letter_L">
<div class="monster_L">
<img src="http://googledoodle.lucasdebelder.be/images/l/monster.png">
</div>
<div class="benen_L">
<div class="B_1"></div>
<div class="B_2"></div>
<div class="B_1 B_3"></div>
<div class="B_2 B_4"></div>
</div>
</div>
I have a down arrow with rings in a ripple effect around it. The down arrow click doesn't work with the rings around it, but if I remove the rings, the click function works normally.
This is the webpage: https://rimildeyjsr.github.io/St.Anthony-Website/
Any ideas how to fix it?
CSS:
body{
background: red;
}
.down-arrow {
display: none;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
z-index: 5;
border-radius: 50%;
height: 80px;
width: 80px;
}
.ring {
border: 2.5px solid white;
-webkit-border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
left:0;
right: 0;
top:50%;
z-index: 5;
margin: 0 auto;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
opacity: 0.0;
}
.ring2 {
-webkit-animation-delay: 1.4s;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0,0); opacity: 1;}
100% {-webkit-transform: scale(1.2,1.2); opacity: 0;}
}
HTML:
<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown">
<div class="ring"></div>
<div class="ring ring2"></div>
add z-index some higher value will solve the problem
body{
background: red;
}
.down-arrow {/*
display: none;*/
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
z-index: 15;
border-radius: 50%;
height: 80px;
width: 80px;
}
.ring {
border: 2.5px solid white;
-webkit-border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
left:0;
right: 0;
top:50%;
z-index: 5;
margin: 0 auto;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
opacity: 0.0;
}
.ring2 {
-webkit-animation-delay: 1.4s;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0,0); opacity: 1;}
100% {-webkit-transform: scale(1.2,1.2); opacity: 0;}
}
<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown">
<div class="ring"></div>
<div class="ring ring2"></div>
Credit to #nevermind