Transition in CSS3

Submitted by Niona on Sat, 2017-02-11 14:45

Hello everybody!
I'm new in CSS3 transition/transform field. On W3School website there is a wide number of examples, so I use them to get start from Wink My idea is to transform a square to a rectangle (with transition) and CSS could be something like that:

div {
width: 10px;
height: 10px;
background: red;
transition: width 5s;
}

div:hover {
width: 100px;
height: 10px;
background: red;
}

CSS Slideshow Transitions in Squarespace

Submitted by lampshade on Thu, 2013-12-19 02:01

I'm new to web design, and am using a Squarespace template. On my homepage I have a slideshow, and I am trying to ease the transitions between slides by inserting some snippet of CSS code. I found this page that shows a couple options. I used this snippet:

.slide {
  -webkit-transition: opacity 2000ms ease-in-out;
     -moz-transition: opacity 2000ms ease-in-out;
       -o-transition: opacity 2000ms ease-in-out;
          transition: opacity 2000ms ease-in-out;

How can I make good mobile responsive transition?

Submitted by choikh on Sun, 2013-06-02 04:13

Hello guys,
I have currently trying to make css transition into my website.
I think I have done a great job on a desktop. However, when I go to mobile, bad thing happen Sad
The page is here: My Problem Page

What I want to do is like this: when mouse over the avatar, the <div> increase length and a text box showing my name and contact appear below.

/* About Us CSS
------------------------------------------------------------ */
.left {
	float: left;
}
 
.right {
	float: right;
}
 
.single-set {
	overflow: hidden;

Changing the direction of a transition

Submitted by pepijnschnitzeler on Mon, 2013-04-22 20:53

Hello,

I want to make a transition of a pop-up div using the css3 transition feature. However I can't seem to figure out how to change the direction of the transition. I used this example to experiment with it but I cannot let the block expand from the right to the left.

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
 
div:hover
{
width:300px;
}
</style>
</head>
<body>

Making a "push" CSS gallery

Submitted by verandaguy on Wed, 2012-07-11 03:12

I want to make a CSS image gallery/slideshow, which uses a sort of "push" transition — a bit like frames on a strip of film. After getting to the last image, the animation would restart the cycle by returning to the first image. Is it possible to do this using CSS3? What if I want the transitions timed?

Syndicate content