Sample1 (transition-duration)

Run Back

img {
    position: relative;
    left: 0;
}
img.move {
    left: 800px;
}
.img1 {
    transition-duration: 1s;
}
.img2 {
    transition-duration: 2s;
}

Sample2 (transition-property)

Run Back

img {
    position: relative;
    left: 0;
    top: 0;
}
.img1 {
    transition-duration: 1s;
    transition-property: left;
}
.img1.move {
    left: 800px;
    top: 200px;
}

Sample3 (transition-property 複数指定)

Run Back

img {
    position: relative;
    left: 0;
    top: 0;
    transition-property: left, top;
    transition-duration: 1s, 2s;
}
img.move {
    left: 800px;
    top: 200px;
}

Sample4 (transition-timing-function)

Run Back

img {
    position: relative;
    left: 0;
    transition-duration: 2s;
}
img.move {
    left: 800px;
}
.img1 {
    transition-timing-function: ease;
}
.img2 {
    transition-timing-function: linear;
}
.img3 {
    transition-timing-function: ease-in;
}
.img4 {
    transition-timing-function: ease-out;
}
.img5 {
    transition-timing-function: ease-in-out;
}
.img6 {
    transition-timing-function: cubic-bezier(0,1,1,0);
}

Sample5 (transition-delay)

Run Back

img {
    position: relative;
    left: 0;
    transition-duration: 1s;
    transition-delay: 2s;
}
img.move {
    left: 800px;
}

Sample6 (transition)

Run Back

img {
    transition: left 2s linear, top 1s 500ms ease-in-out;
}
img.move {
    left: 800px;
    top: 200px;
}