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.
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%; }
I'm making a diaporama in pure css, and so far so good, however each pic changes to the other abruptly and i'm trying to make the change gradual (one pic disapearing slowly while the other appears).
I've tried with all timing functions (except cubic-bezier since i'm not too sure how to use it yet) and it hasn't worked.
How to make the changes gradual? I've seen someone doing it with only css3 but I haven't been able to reproduce it.
Here is the css and the html
.diapo {
width: 350px;
height: 150px;
border: 3px solid #544B4D;
background-image: url("http://via.placeholder.com/350x150/F00");
background-size: 350px 150px;
animation-name: diapo1;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
#keyframes diapo1 {
0% {
background-image: url("http://via.placeholder.com/350x150/F00");
}
33% {
background-image: url("http://via.placeholder.com/350x150/0F0");
}
66% {
background-image: url("http://via.placeholder.com/350x150/00F");
}
}
<body>
<div class="diapo">
</div>
</body>
Thanks for any answer!
IMO, the best solution is to use multiple img in the DOM combined with some opacity animations:
.container {
position: relative;
/* Define size on the container: (best if aligned with images size) */
width: 350px;
height: 150px;
box-sizing: content-box;
/* fancy stuff, not required */
border: 1px solid #000;
border-radius: 5px;
overflow: hidden;
}
.container > img {
height: inherit;
width: inherit;
/* images are stacked on top of each other */
position: absolute;
top: 0;
left: 0;
opacity: 0;
/* 10s is total time (time for a complete cycle) */
animation: fadeInOut 10s infinite;
}
.container > img:nth-child(2) {
animation-delay: 3.33s; /* totalTime * 1/3 */
}
.container > img:nth-child(3) {
animation-delay: 6.66s; /* totalTime * 2/3 */
}
/* choose a % of anim time allocated to transition,
let's call it transTime. Here it's 10%. */
#keyframes fadeInOut {
0% {
opacity: 0;
}
/* transTime */
10% {
opacity: 1;
}
/* transTime + (100% / image count) */
43% {
opacity: 1;
}
/* previous + transTime */
53% {
opacity: 0;
}
}
<div class="container">
<img src="http://via.placeholder.com/350x150/F00"/>
<img src="http://via.placeholder.com/350x150/0F0"/>
<img src="http://via.placeholder.com/350x150/00F"/>
</div>
I strongly advise you to use a preprocessor that allow variables and loops (maybe SCSS or Less) to generate the nth-child section and even the animation block
I don't know that most browser can interprete a change in background-image gradually... How can they interprete that change ? Should it mean the picture slides from the top, should it mean a fade out/fade in, should it mean a fade in of the new picture above the old one ?
I think you'd need to animate a fade out/in (The code below might not work as is, it is just to give you an idea) :
#keyframes diapo1 {
0% {
background-image: url("pics-about-us/a-u1.jpeg");
}
30% { opacity:1;}
33% {
background-image: url("pics-about-us/a-u3.jpeg");
opacity:0;
}
36% {opacity:1}
//etc...
If you want to do it with a gradual change over the whole animation, I would use on <div> child per background image and animate each individually.
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
*/
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)