I've been trying to teach myself some css animations with keyframes, and I'm trying to create something in which a small square drops down, then out of that square, a rentangle protrudes from the left, it then displays some text after 8 or so seconds and then the rentangle retreats back into the smaller square (to the right) and the smaller square retreats upwards into 'thin air'. If you're wondering what this is for it's an alert notification when someones follows me on Twitch TV while I livestream. Here is a JSFiddle of my efforts so far. For some reason on JSFiddle the content doesn't appear before the animation, however on the the alert service i use it does happen. I've linked their tester here, so you can see what I mean.
HTML CODE:
<html>
<head>
<title>GR412 Twitch Follower Alert</title>
<link href="Twitch\followeralert.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="follower-container">
<div class="left-square-container">
</div>
<div class="right-retangle-container">
<div class="header">
<span class='keyword name'>{name}</span> is now following you!
</div>
</div>
</div>
</body>
</html>
CSS CODE:
#keyframes slideInFromAbove {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
#keyframes slideInFromTheLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
#keyframes slideInFromBelow {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
#keyframes slideInFromTheRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.follower-container {
display: flex;
font-family: 'Roboto';
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.left-square-container {
width: 75px;
height: 75px;
background: #313131;
animation: 1s 1s 1 slideInFromAbove;
}
.right-retangle-container {
width: 500px;
height: 75px;
background: #212121;
animation: 1s 2s 1 slideInFromTheLeft;
}
.header {
font-size: 24px;
color: #ffffff;
text-align: center; /*vertical alignment of text*/
position: relative; /*horizontal alignment of text*/
top: 50%; /*horizontal alignment of text*/
transform: translateY(-50%); /*horizontal alignment of text*/
margin: 10px,
10px,
10px,
10px; /*GOT TO HERE, THIS COULD BE CAUSING TWITCHING*/
}
.keyword:not(.user_message) {
color: #0d47a1;
}
However there are some issues, first being that the content appears first, then does the animation. I would like it so you start with an empty screen and then the animation ensures that the square drops down first, then the rentangle protrudes from the square and finally the text is displayed. These three components should hold for 8 seconds then as already described another animation should hide each component in the order specified in the first paragraph.
The second issue is that when the rentangle protrudes, it doesn't do it from the right hand edge of the square, rather it does it from the left. So it overlaps the square, which ruins the effect.
I've based my code off this exsisting question:css3 transition animation on load?, which has helped a lot, but it doesn't help with my specifc needs.
Any help would be appreicated, and if something isn't clear let me know.
Note, if the second link doesn't work, let me know and i'll sort it.
Thanks, GR412.
Issue 1: You need to set the styles of the initial placement for the content.
Issue 2: position: relative; z-index: /*some value*/ So you can properly layer the content.
You also need to use animation-fill-mode: forwards
This sets the end styles to the end styles of #keyframes associate with it.
I've tweaked your timing. Here's a plnkr of it. Read the comments in the CSS
You end up having to calculate percentages. I would consider working out a calculation that can accept variables for scss/less/sass etc.
CSS comments:
/*
to calculate these percentages:
([seconds of portion of animation] x 100)/[total seconds of animation]
1) slideInFromAbove starts
2) slideInFromTheLeft starts
3) slideInFromTheLeft ends
4) slideInFromAbove ends
slideInFromAbove:
1) slide down
2) hold
2) slide up
slideInFromTheLeft:
1) slide right
2) hold
3) slide left
*/
Related
I want to display an animated loading icon when the user have submitted a search.
SEQUENCE OF EVENTS I'M LOOKING FOR:
USER SUBMITTED A SEARCH
MAKE LOADING ICON VISIBLE
MAKE LOADING ICON INVISIBLE ONCE THE SEARCH IS COMPLETED
The issue I'm facing is mostly css.
Firstly, the loading icon seems to be behind the form element.
Secondly, I cannot increase the size of the div (searchEngineForm) to have the same size as the form.
Lastly, I cannot set div (searchEngineForm) width to 100%. It goes outside of the form.
Here is my code:
HTML:
<form action="setJobFields" method="POST">
<div id="searchEngineForm" style="display: none;">
<div class="loader">
</div>
</div>
...
</form>
CSS:
#searchEngineForm{
position: absolute;
/* width: 100%; */
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
To set an html element above others, you could set its Z-index to a higher number than what’s around it.
For example, say you’re wanting to display your loading symbol in front of the rest of the page. You could contain the whole page in a single div, for the sake argument we give it a class of “page”, we can set it as:
.page{ z-index: -1 ;}
And the loader as
.loader{ z-index: 1; }
Then, to position it where you want, you can set the position to absolute and move it around with the top and left properties, such as
.loader{ z-index:1; position: absolute; top: 50%; left: 50%; }
Why does border-radius not work when background is not applied onto the animation.
The border radius only works when a background is applied at 0%-50%-100%. Without the background color the border-radius doesn't work.
I expect the border-radius to change from a square to a circle and then back to a square.
.square {
/* Set up the normal state */
display: block;
width:350px;
height:350px;
margin: 200px auto;
background:#41A9F0;
/* apply the animation */
animation: box 5s linear infinite;
}
#keyframes box {
0% {
transform: rotate(0) scale(0.2);
/* background: #41A9F0; */
border-radius: 0%;
}
50% {
transform: rotate(180deg) scale(2);
/* background: #5ABE8A; */
border-radius: 50%;
}
100% {
transform: rotate(360deg) scale(0.2);
/* background: #41A9F0; */
border-radius: 0%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shape Animation Challenge</title>
</head>
<body>
<!-- HINTS
1) Open shape-animation-ANSWER.html in your browser and try to create the final product.
2) Create a keyframe named box.
3) There are three points to this animation, starts off as a square, then a circle (background color for the circle is #5ABE8A), then back to a square.
Hint: You will need the properties border-radius and transform -->
<div class="square"></div>
</body>
</html>
Without any background color you can't see the animation but it still persist.
Here an example with your animation applied also to a div without background color but with border (to see what happen)
https://jsfiddle.net/cjohm3xb/1/
.square-border {
border:1px solid red;
/* apply the animation */
animation: box 8s linear infinite;
}
I have tested your code in Chrome 75.0.3770.142 and Edge 44.17763.1.0. You have provided a coloured div, so you can see the animation. Try to remove the background and add a child, which can be a text or something else, then you'll see the same effect. If you remove background and all the children, obviously you "will see" an empty animated div, which translates to nothing on screen actually!
I tried playing with keyframes, backgrounds and border radiuses. The page seems to work correctly. Check this stylesheet:
.square {
/* Set up the normal state */
display: block;
width:350px;
height:350px;
margin: 200px auto;
/* apply the animation */
background: #41A9F0;
animation: box 5s linear infinite;
}
#keyframes box {
0% {
transform: rotate(0) scale(0.2);
background: #41A9F0;
border-radius: 0%;
}
10% {
background: green;
border-radius: 50%;
}
25% {
background: blue;
border-radius: 10%;
}
50% {
background: red;
transform: rotate(180deg) scale(2);
border-radius: 30%;
}
100% {
transform: rotate(360deg) scale(0.2);
background: yellow;
border-radius: 0%;
}
}
Remember that percentage values for border radius go from 0 to 50. Anything above 50 is simply 50.
Source: https://www.codecademy.com/forum_questions/559fe347e39efe4cf40005a9
I you can provide the browser you are using or explain the problem better at least, community could have provided better answers.
Hi i'm just a student I just wanna know if its possible to combine hover, transition, and transform by just using css.
How can transformed image transitioned back to it's original size and shape when hovered?
<html>
<style>
.sample {
display: inline-block;
border: 0px solid #fff;
margin: 10px;
overflow: hidden;
height: 500px;
width: 140px;
transform: rotate(0deg);
webkit-transition: 0.8s;
transition: 0.7s;
}
.sample img {
display: block;
transform: rotate(2deg);
transform-origin: 200% -600%;
}
.sample img:hover {
width: 600px;
height: 600px;
transform: rotate(0deg);
transform-origin: 0% 0%;
-webkit-transition-timing-function: ease-in-out;
}
</style>
<body>
<div class="sample">
<img src="http://www.freegreatpicture.com/files/39/1264-tree.jpg" height="600" width="600">
</div>
</body>
</html>
If you only define the CSS "transformed" rules in the hover pseudo-class, then when the image is no longer being hovered-over it will automatically transition back to its original state.
Here is a simplified example using part of your code (I changed the image to the Wikipedia logo since your image was coming up broken):
.sample img {
transform: rotate(30deg);
transition: ease-in-out 700ms;
}
.sample img:hover {
transform: rotate(0deg);
}
<div class="sample">
<img src="https://en.wikipedia.org/static/images/project-logos/enwiki.png">
</div>
The hover pseudo-class is an "active state class", meaning it only comes into play while that action is taking place (i.e., the pointer is hovered over the element).
If you want to include special easing and timing rules on the change from default state to hovered state then include the transition property in the default rule. You can specify lengths of time over which the transition takes place so the change can be more "animated". You'll notice that in the example above I stretched the rotation to 700ms so you can see it turning when hovered, then turning back when no longer hovered.
Basically I'm trying to create this flipping effect that I found on this site
You can see the effect on the main title and subtitle when clicking on the far right arrow (to see the arrow hover over at the far right of the colored section) which makes the titles flip up.
I don't really know how to do this effect so I found an example on the web, but the problem is that it has the hover state to it and I can't get my head around how to make it auto start on page load instead of hovering. As you can see on this example the flip sides A and B are both colored, I wish to start from A side being background white and text in white then flip it into to the colored version, so with other words from invisible to visible.
Check my working Demo here
The code for this example is the following:
/* Set-up */
body {
color: rgb(6, 106, 117);
text-transform: uppercase;
font-family: sans-serif;
font-size: 100%;
background: #F4F6F8;
padding: 3em 0 0 0;
line-height: 62px;
-webkit-perspective: 1000px; /* <-NB */
}
/* Container box to set the sides relative to */
.cube {
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;
-webkit-transition: -webkit-transform .33s;
transition: transform .33s; /* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; /* <-NB */
}
/* The two faces of the cube */
.flippety,.flop {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);
height: 100px;
}
/* Position the faces */
.flippety {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
}
.flop {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
/* Rotate the cube */
.cube:hover {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg); /* Text bleed at 90º */
}
<div class="cube">
<div class="flippety">
<h1>Flippity</h1>
</div>
<div class="flop">
<h2>Flop</h2>
</div>
</div>
My goal:
Is to create a flipping cube that flips my title up automatically (no hover) on page load.
If something is not clear please let me know and I will try to explain as clear as possible. Thank you!
In the example you give, there are no 3d transforms for the title flip. It is a simple 2D translation on the Y axis like this one:
div{
position:relative;
font-size:2em;
line-height:1.2em;
height:1.2em;
overflow:hidden;
}
h2{
font-size:1em;
margin:0; padding:0;
animation:slide .5s .5s ease-out forwards;
}
#keyframes slide {
to {transform:translateY(-1.2em);
}
<div id="titles">
<h2>this is title one</h2>
<h2>This is a second title</h2>
</div>
I'm not sure what you are trying to accomplish but if you only want it to flip once when the page is ready you can change the css class ".cube:hover" to ".cubeRotate" and then use jQuery to rotate it on page load like this:
$( document ).ready(function() {
$(".cube").addClass("cubeRotate");
});
You can see it here: https://jsfiddle.net/qro8euyo/ working with 2 seconds delay (otherwise it will be too fast for the user to catch it)
I'm trying to animate a span that moves back and forth enclosed within a div using CSS3 keyframes. Ideally, I'd like the keyframes to look something like this:
#-webkit-keyframes backandforth {
0% {text-align:left;} 50%{text-align:right;} 100%{text-align:left;}
}
Demo in JSFiddle
But since it's not possible to animate text-align, I've been searching for an alternative property that can be animated to reach the desired positioning. That's where I'm stuck at.
I tried setting the left property to 100% midway through the animation, but that ended up pushing the span off the div. I also tried animating the float property, but that didn't work.
Then I saw this question on moving text from left to right and tried the JSFiddle from the top answer. While it looks like the solution, it unfortunately did not work for me since I want my animation to move continuously at ease, and for the last few seconds of that animation, the span stalls.
CSS Solution
you can play around the left position when the animation is at 50% like so :
because when you put it left: 100% it depend on the left corner of the span this is why it will go out the container div
#-webkit-keyframes backandforth {0%{left:0;} 50%{left:58%;} 100%{left:0;}}
Live Demo
I hope this fits your needs
JavaScript solution
var thisis = document.getElementById("wrapper");
var tyty = document.getElementById("move");
var witth = tyty.offsetWidth;
thisis.style.paddingRight = witth +"px";
Live Demo
with this JS whatever you change the text it will still in the container div
There is also a pure-CSS way to do it if you combine absolute positioning left with simultaneous transform: translate.
https://jsfiddle.net/cd7kjwy6/
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
.mt-2 {
margin-top: 0.5rem;
}
/* ---------------- relevant CSS ---------------- */
.animated {
position: relative;
background-color: pink;
max-width: 200px;
overflow: hidden;
line-height: 3rem;
height: 3rem;
}
.animated__text {
position: absolute;
animation: 3s bounce ease-in-out infinite paused;
white-space: nowrap;
top: 0;
padding: 0 0.5rem;
}
.animated:not(.animated--on-hover) .animated__text,
.animated.animated--on-hover:hover .animated__text {
animation-play-state: running;
}
#keyframes bounce {
0%, 5%, 95%, 100% {
left: 0%;
transform: translate(0, 0);
}
45%, 55% {
left: 100%;
transform: translate(-100%, 0);
}
}
<div class="animated">
<span class="animated__text">animate me!</span>
</div>
<div class="animated mt-2">
<span class="animated__text">Longcat is looooooooooooooooooong!</span>
</div>
<div class="animated mt-2">
<span class="animated__text">~</span>
</div>
<div class="animated animated--on-hover mt-2">
<span class="animated__text">only on hover</span>
</div>
If you wanted to snap the "hover" variant back to the original position, you could use something like this (or JavaScript for a proper reset):
.animated.animated--on-hover:not(:hover) .animated__text {
left: 0 !important;
transform: translate(0, 0) !important;
}