im doing something on HTML,CSS and transition-property, transition-duration, transition-timing-function properties arent work on my project. I used every -webkit- , -moz-, -o- and others not work. I did uninstall the Google Chrome and I installed it again but dont work. My codes:
index.php:
<?php
include "function/baglanti.php";
?>
<html>
<head>
<title>Deneme | Anasayfa</title>
<link rel="stylesheet" href="style/main.css" />
</head>
<body>
<div id="den">sshshsh</div>
</body>
</html>
main.css:
#den
{
width: 100px;
height: 100px;
background-color: red;
}
#den:hover
{
width: 200px;
transition: width 0.5s linear;
}
For the transition to work both ways, move the transition property to the #den rule
#den
{
width: 100px;
height: 100px;
background-color: red;
transition: width 0.5s linear; /* moved it here and it work both ways */
}
#den:hover
{
width: 200px;
}
<div id="den">sshshsh</div>
Related
I'm trying to figure out how transforming, animating, and transitioning work, and I've followed atleast 1 or 2 crash courses and I have followed 5 solutions in problems related to this, and still nothing worked.
#tr-w {
transition: width 1s ease-in-out;
}
#tr-w:hover {
width: 50%;
}
#tr-h {
transition: height 2s ease-in-out;
}
#tr-h:hover {
height: 40vh;
}
#tr-r {
transition: width 1s ease-in-out, transform 2s ease-in-out;
}
#tr-r:hover {
transform: rotateZ(180);
width: 30vh;
}
JSFiddle: https://jsfiddle.net/q976oc0h/1/
CodeSandbox: https://codesandbox.io/s/dark-pine-i0ut5?file=/index.html
CodePen: https://codepen.io/ssssss12518/pen/rNMMZoL
It doesn't work on any code editor I know, even IDEs like Atom. (my main text editor)
There's a couple of things going on.
The transform functions als take a unit:
transform: rotateZ(180); -> transform:rotateZ(180deg);
The transition from height:auto; isn't intuitively supported.
There's a couple of work arounds. You could find exmaples on this question
Sidenote: Generally, transitioning on width/height is bad practice for performance. It will trigger a reflow/recalculate of the document structure. which is costly.
You would also notice that the text inside the divs gets squished into multiple lines or moves around a lot.
general approach is to use transform to shrink/grow/fold-out the elements. like you did for rotate.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Arial", sans-serif;
}
.container {
padding: 10px;
margin-left: 20px;
}
.container > *[class*="bg"] {
margin-left: 10px;
}
.bg-gray {
margin: 10px 0px;
background-color: #cbd5e0;
border: 3px solid black;
padding: 20px;
margin-bottom: 20px;
width: 30%;
}
#tr-w {
transition: width 1s ease-in-out;
}
#tr-w:hover {
width: 50%;
}
#tr-h {
transition: height 1s ease-in-out;
height:100px; /*I've added a base heigth to so the browser can calculate a starting value */
}
#tr-h:hover {
height: 40vh;
}
#tr-r {
transition: transform 1s ease-in-out;
}
#tr-r:hover {
transform: rotateZ(180deg); /*i've added a 'deg' as unit*/
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Transition Animation CC</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="bg-gray" id="tr-w">
<p>
Hover over me
</p>
</div>
<div class="bg-gray" id="tr-h">
<p>
Hover over me
</p>
</div>
<div class="bg-gray" style="height: 30vh;" id="tr-r">
<p>
Hover over me
</p>
</div>
</div>
<script src="main.js" charset="utf-8"></script>
</body>
</html>
because you didn't set default height to #tr-h element
#tr-h {
transition: height 2s ease-in-out;
height:100px;
}
and sorry for my horrible english.
I have got a problem with CSS and transition.
I need to make a div 100px x 100px, it's just an example of course.
When I put cursor hover it, it should grow and be 500px x 500px.
And here, everything is fine and working.
The thing is, when i remove the cursor, I need that the div return back to 100x100px, but it won't have a transition, it just disappear and return 100x100px.
How can I fix this?
Here is the code i use.
<html>
<head>
<style>
div.resize {
width: 100px;
height: 100px;
background: rgb(80,80,80);
}
div.resize:hover {
width: 500px;
height: 500px;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="resize"></div>
</body>
</html>
Currently you are saying that there can only be an animation while hovering. You want the animation to reverse once you have left the element (you no longer hover), but that is not allowed, as the div without hover has no animation set.
Just put the transition-duration: 1s on the 'div.resize' instead of on the 'div.resize:hover' and it is fixed.
Here you go. Just move the transition to the container rather than the :hover. I included the prefixes for other browsers as well. If you want to see how you can modify the transitions, check out W3 Schools.
div.resize {
width: 100px;
height: 100px;
background: rgb(80, 80, 80);
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-o-transition: all 1s ease; /* IE 9 */
-ms-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
div.resize:hover {
width: 500px;
height: 500px;
}
<body>
<div class="resize">
</div>
</body>
I have tried adding a custom cursor to my webkit pulltab, but cannot seem to get it working. Other elements, such as the background color are changable, but the css "cursor" property is not mutable:
#sessionbuilder::-webkit-resizer {
background: #000;
cursor: help !important;
}
EDIT
Well, a simple example with webkit is this one:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
cursor: wait;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect with a cursor wait.</p>
</body>
</html>
Yes.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
.foo { cursor: crosshair; }
/* use prefixed-value if "zoom-in" isn't supported */
.bar { cursor: -webkit-zoom-in; cursor: zoom-in; }
/* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz { cursor: url(hyper.cur), auto }
I am trying to Animate a div. What i am actually doing in the animation is translating the div to 100%. but the animation only works in chrome and it is not working in Firefox. i tried to add prefix and i also included prefix-free.js plugin. Caniuse.com says firefox will support animations without prefixing. I have seen lot similar question in stack over flow. but most of them are using property's that are not yet supported in Firefox and other. But mine is very simple. I even tried by removing translation and background-color change. but it is also not working.
HTML:
<div class="container">
<div class="icon"></div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js' ></script>
CSS:
.container {
padding:3em;
}
.icon {
width: 100px;
height: 100px;
background-color: red;
animation: test 1s linear 0 infinite normal both;
}
#keyframes test {
0% {
transform: translateX(50%);
background-color: red;
}
100% {
transform: translateX(0%);
background-color: yellowgreen;
}
}
Demo
Your syntax is invalid. Your zero animation-delay needs to have a unit, so it should be 0s, not 0:
.icon {
width: 100px;
height: 100px;
background-color: red;
animation: test 1s linear 0s infinite normal both;
}
Unitless zeroes are only permitted for lengths, not times. See this answer for an explanation (the question is about transitions, but it applies to animations as well).
Change your animation call to this,
.icon
{
animation: test 1s linear infinite;
}
It seems firefox does not understands some short hand properties.
Write your code like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
padding:3em;
}
.icon, .icon:hover {
width: 100px;
height: 100px;
background: red;
-webkit-animation: test 2s linear infinite; /* Chrome, Safari, Opera */
animation:test 2s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes test {
from {background: red;}
to {background: yellow;}
}
/* Standard syntax */
#keyframes test {
from {background: red;}
to {background: yellow;}
}
</style>
</head>
<body>
<div class="container">
<div class="icon"></div>
</div>
</body>
</html>
This website is based on wordpress
http://www.gear-rat.com/
How can I get that image effect can anyone help me? in HTML5 and CSS3
I just started web design and am still learning by copying good websites so I can get handy with web design, ofc I'm not selling them or anything illegal
That effect is done with the following code:
JavaScript:
jQuery(document).ready(function() {
function tz_overlay() {
jQuery('.post-thumb a').hover( function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 1 }, 200);
}, function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 0 }, 200);
});
}
tz_overlay();
});
CSS:
.post-thumb a span.overlay
{
background: rgba(0, 0, 0, 0.8);
position: absolute;
width: 100%;
height: 60%;
display: block;
line-height: 20px;
z-index: 5;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
text-align: center;
padding-top: 40%;
color: #ada89c;
font-size: 15px;
font-weight: bold;
}
HTML:
<div class="post-thumb port-thumb">
<a href="http://www.gear-rat.com/test/portfolio/steel-riveted-box/">
<span class="overlay" style="opacity: 0;">Steel Riveted Box</span>
<img src="http://www.gear-rat.com/test/wp-content/uploads/2013/06/boxthumb1.jpg" alt="Steel Riveted Box" style="opacity: 1;">
</a>
</div>
How I found the code:
I looked at the images and noticed they all had a class called overlay, so I looked in the .js files for any mention of overlay and saw it being used in the tz_overlay function. So I copied that function and the div surrounding an image to my website. When I opened a page with that div in it, it worked like that website so I know I had it.
It is a good idea to look around for specific indicators like that when trying to find out how something works on a website.
You can solve this with only html and css3, you don't need javascript or a javascript library.
<html>
<head>
<title>hello world</title>
<style type="text/css">
div#tmp{
background-color: #A36333;
height: 100px;
width: 100px;
}
div#tmp div{
background-color: #000000;
height: 100%;
width: 100%;
color: #ffffff;
line-height: 100px;
vertical-align: middle;
text-align: center;
opacity: 0.0;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
-ms-transition: opacity 0.2s linear 0s;
-moz-transition: opacity 0.2s linear 0s;
}
div#tmp div:hover{
height: 100%;
width: 100%;
opacity: 0.6;
}
</style>
</head>
<body>
<div id='tmp'>
<div>hello world</div>
</div>
</body>
</html>
The transition property defines how elements in html change.
http://www.w3schools.com/css/css3_transitions.asp
To alter an element by mouse over you can use the css :hover selector in css.
http://www.w3schools.com/cssref/sel_hover.asp
Check out this fiddle:
http://jsfiddle.net/5tmt98sk/
Visit the JS Fiddle page
When you are on the jsfiddle page, put your mouse over the image
The website you looked at does the same thing, but there image is the same image, but they photoshop it to be darker, and the photoshop some text on to it.Same concept =)