I'm trying to make a animation with #keyframes. But, the example don't work.
.main{
width:100%;
height:500px;
border: 1px solid black;
}
#keyframes change-bg-color {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
<div class="main"></div>
You need to reference it within your style declaration via the animation property:
.main{
animation: 5s change-bg-color;
width:100%;
height:500px;
border: 1px solid black;
}
#keyframes change-bg-color {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
<div class="main"></div>
MDN has a great overview of animations within CSS which will tell you all you need to know about configuring your animation to behave the way you want it to: https://developer.mozilla.org/en/docs/Web/CSS/animation.
Related
The background using animation to fade in and out repeatedly. The background fill seems to ignore the border radius of the DIV. It appears to work as expected in chrome but not in FF (v 78.11). Wondering if there's some Mozilla specific property I should be using? The DIV shows the radius and the animation does what it should, the corner just doesn't get clipped to fit the radius. I'm guessing a FF bug?
div {
width: 50%;
height: 40px;
border: 2px solid black;
display: inline-block;
box-sizing: border-box;
text-align: center
}
div:first-child {
border-top-left-radius: 16px;
}
div:nth-child(2) {
border-top-right-radius: 16px;
}
.warning {
animation: WARNING-FLASH 1s infinite;
border-top-left-radius: 16px;
}
#keyframes WARNING-FLASH {
0% {
background-color: #cc190c00;
}
50% {
background-color: #cc190c;
}
100% {
background-color: #cc190c00;
}
}
<div class="warning">testing</div><div>some stuff</div>
What's the general idea/technique behind doing something like this in CSS3? Would it be possible?
(I'm talking about the line, not the label, which I know how to do)
I found it here
I believe this can be done using SVG animations.
You can use a library called SnapSVG.
Take a look at some of these amazing fluid SVG animations Elastic SVG Elements created by Mary Lou.
This Is Not Exactly What You Want. But Take A Look:
body,
html {
background: #111;
}
#ib {
width: 300px;
height: 50px;
font-size: 40px;
background: transparent;
color: white;
border: none;
border-bottom: 2px solid #09f;
outline: none;
}
#ib:focus {
-webkit-animation: anim 0.3s cubic-bezier(0.080, 0.805, 0.930, 0.220);
}
#-webkit-keyframes anim {
0% {
border-radius: 0px;
}
50% {
border-radius: 150px/10px;
}
100% {
border-radius: 0px;
}
}
<input type="text" id="ib" placeholder="Type Something">
Just a quick question:
How can I create this vertical shape in CSS?
This is going to be a left border of a div.
Many thanks!
UPDATE
The main issue is with the bottom part of the line.
Try this trick with borders:
div {
border-left:20px solid orange;
border-bottom:20px solid transparent;
width:0;
height:300px;
}
Fiddle
Working Solution: http://jsfiddle.net/avi_sagi/F25zD/
CSS Rules
div{
height:100px;
width:0px;
border-left:5px solid #aa0;
border-bottom:5px solid transparent;
}
With a <div> you could use this css:
div {
height: 50px;
width: 50px;
border-left: 10px solid gold;
border-bottom: 10px solid transparent;
}
Here's a fiddle
For a 45° angle on the bottom, the border-bottom must be the same as the border-left. To alter the angle, change the width of border-bottom.
you can try with after pseudo element but this is another way:
<div class="container">
<div class="top"></div>
<div class="line"></div>
</div>
.top {
height:20px;
background-color:#f0ae3f;
width:20px;
}
.line {
height:300px;
background-color:#f0ae3f;
width:20px;
-moz-transform: skewX(0deg) skewY(-40deg);
-webkit-transform: skewX(0deg) skewY(-40deg);
-o-transform: skewX(0deg) skewY(-40deg);
-ms-transform: skewX(0deg) skewY(-40deg);
transform: skewX(0deg) skewY(-40deg);
margin-top:-10px;
}
here you have the fiddle: http://jsfiddle.net/WgmmU/1/
you could have a look at doing this using the :after selector in css
HTML
<div id="vLine"></div>
CSS
#vLine{
/* test styling */
position:absolute;
top:20px;
left:100px;
/* end test styling */
height:100px;
width:10px;
background:orange;
}
#vLine:after{
content: " ";
top: 100%;
border: solid transparent;
position: absolute;
border-width: 5px; /* half the width of your line*/
border-top-color: orange; /* because you want to touch the top with color */
border-left-color: orange; /* because you want to touch the left with color */
}
fiddle: http://jsfiddle.net/nQKR4/2/
div {
background-color:orange;
width:20px;
height:300px;
}
Best practice is not to use borders at all, because diffrent browsers render them diffrently (IE). Sometimes it may even break your layouts.
Here are some, but definitely not all, of the resources I dug through trying to find syntax which will work in IE9:
http://files0.cnitblog.com/jv9/Migrating_Consumer_Preview_App_to_Release_Preview.pdf
http://msdn.microsoft.com/en-us/library/ie/ff975245(v=vs.85).aspx
http://msdn.microsoft.com/en-us/magazine/ff728624.aspx
How to create an event when the animation ends?
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
... and this is the code after studying all that.
function callback(Own33){
return function(){
var IdentifyMe;
var beSure;
var JustONEmindU;
IdentifyMe=document.getElementById(LeftDA);
IdentifyMe.addEventListener("mouseout", PerformReset, false);
IdentifyMe.className = (window.transitionstart) ? "lessdark":"";
JustONEmindU=document.getElementById(LeftDA);
JustONEmindU.addEventListener("transitionend", function (evt) {
var localone;
localone = document.getElementById(LeftDA);
localone.className = "LITel";
localone.addEventListener("click", HeyClick3L, false);
}, false);
}
}
and CSS :
#LftTx1.lessdark{
transition-duration:1s;
transition-name: AnimOne;
transition-timing-function: linear;
transition-delay: 0s;
transition-iteration-count: 1;
transition-play-state: running;
transition-direction: normal;
}
#keyframes AnimOne{
from{
top:3.9%;
width:11%;
height:25%;
opacity:0.6;
padding-top:0px;
padding-bottom:3.3%;
padding-left:1%;
border-top:1px solid red;
border-right:4px solid yellow;
border-bottom:1px solid red;
border-left:1px solid red;
border-top-left-radius:3px;
border-top-right-radius:3px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
text-align:left;
color:orange;
font-size: 0.7rem;
}
to {
top:-18.7%;
width:15.7%;
height:25.3%;
padding-top:0.33%;
padding-bottom:4.7%;
padding-right:1.3%;
opacity:0.9;
border-top:2px solid #77702B;
border-right:2px solid #77702B;
border-bottom:2px solid #77702B;
border-left:2px solid #77702B;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
text-align:center;
color:#00B800;
font-size:1.1rem;
}
}
It is simply not working because neither CSS3 transitions nor animations are supported by IE9 <
I have some text on a page, when someone mouses over it, it will highlight (using outline) several selected images on the same page. I want this to be one way, so mousing over the text highlights the images, but I want mousing over the images to have no effect, right now it also highlights everything. Is this possible? Note: each image has an id and a class (jquery draggable) already attached to it.
HTML:
<div class="container">
<div class="containerLeft">alignments</div>
<div><img src="http://www.cool-smileys.com/images/out11.jpg" id="position7" class="ui-widget-content" /></div>
<div><img src="http://www.cool-smileys.com/images/out12.jpg" id="position8" class="ui-widget-content" /></div>
<div><img src="http://www.cool-smileys.com/images/out13.jpg" id="position9" class="ui-widget-content" /></div>
<div> <img src="http://www.cool-smileys.com/images/out14.jpg" id="position12" class="ui-widget-content" /> </div>
</div>
CSS:
/* Normal Styles */
.containerLeft {
color:#333;
width:100px;
}
.containerLeft:hover {
width:100px;
}
/* Hover Styles */
.container:hover .containerLeft {
background-color: none;
}
.container:hover #position12 {
outline:2px solid #CFF;
}
.container:hover #position7 {
outline:2px solid #CFF;
}
.container:hover #position8 {
outline:2px solid #CFF;
}
.container:hover #position9 {
outline:2px solid #CFF;
}
#position7{
position:absolute;
margin: 0;
padding: 0;
border:none;
left: 13em;
top:9em;
z-index:17;
}
#position8{
position:absolute;
margin: 0;
padding: 0;
border:none;
left: 4em;
top:15em;
z-index:2;
}
#position9{
position:absolute;
margin: 0;
padding: 0;
border:none;
left: 7em;
top:5em;
z-index:20;
}
#position12{
position:absolute;
margin: 0;
padding: 0;
border:none;
left: 24em;
top:10em;
z-index:-14;
}
Right now everything is in css, but maybe there is a javascript solution?
The jsfiddle: http://jsfiddle.net/tMzMN/8/
If you want to use JS/Jquery you could achieve what you want this way:
$(".containerLeft").hover(function() {
$(".ui-widget-content").addClass("hover_class");
}, function() {
$(".ui-widget-content").removeClass("hover_class")
});
Then just replace all 4 of your CSS selectors that look like this:
.container:hover #position9 {
outline:2px solid #CFF;
}
...
with this:
.hover_class {
outline:2px solid #CFF;
}
Here is a fiddle of it in action: http://jsfiddle.net/tMzMN/9/
Also, and don't quote me on this, using the Jquery method above will probably have a greater level of backwards compatibility with older browsers as opposed to any CSS tricks you find. I could be wrong and there may very well be something that plays nice with IE<9 but I'm not sure...